<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang=en>
 <head>
  <title>CSS3 module: Generated Content for Paged Media</title>
  <link href="../default.css" rel=stylesheet type="text/css">
  <link href="https://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
  type="text/css">

  <style type="text/css">
.cols { width: 500px; height: 200px; background: #fff; position: relative; border: solid 10px blue; margin: 0.5em 2em 1em 0; font: bold 14px/19px Arial, sans-serif }
.cols p { padding: 3px; margin: 0 }
.gap { position: absolute; background: black; width: 5px; bottom: 0px; top: 0px; border: 10px solid red; border-top-width: 0; border-bottom-width: 0;  }
.rep { position: absolute; top: 45px; background: #333; height: 110px; width: 100px;  color: white; z-index: 4 }
div.example:before { width: 9em !important }
div.example { padding-top: 0.5em }

table.hyphenate { border-collapse: collapse }
table.hyphenate th { 
  text-align: left; white-space: nowrap; border: 1px solid black; padding: 0.2em }
table.hyphenate td { 
  border: 1px solid black; padding: 0.2em 0.2em 0.2em 1em; font-size: 0.8em }

table.border, table.border td, table.border th, table.border table { 
  border-collapse: collapse;
  border: thin solid black;
  padding: 0.2em;
  vertical-align: top;
}
table.border td + td { white-space: pre }
table.border table { padding: 0; border-collapse: separate; border: none; }
table.border table td { border: thin dotted black; padding: 0.2em; margin: 0.2em  }
table.border .comment { margin-top: 0; white-space: normal; font-style: italic }

div.out { background: #F55; padding: 0.2em 0.5em }
div.out div.example { background: #FED }
h1, h2, h3, h4, h5, h6 { background: transparent }
</style>

 <body>
  <div class=head> <!--begin-logo-->
   <p><a href="http://www.w3.org/"><img alt=W3C height=48
    src="https://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

   <h1>CSS3 module: Generated Content for Paged Media</h1>

   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 10 June 2009</h2>

   <dl>
    <dt>This version:

    <dd><a
     href="http://www.w3.org/TR/2009/ED-css3-gcpm-20090610">http://www.w3.org/TR/2009/ED-css3-gcpm-20090610</a>

    <dt>Latest version:

    <dd><a href="http://www.w3.org/TR/css3-gcpm">
     http://www.w3.org/TR/css3-gcpm</a>

    <dt>Previous version:

    <dd><a href="http://www.w3.org/TR/2007/WD-css3-gcpm-20070205">
     http://www.w3.org/TR/2007/WD-css3-gcpm-20070205</a>

    <dt>Editor:

    <dd>H&aring;kon Wium Lie, Opera Software, howcome@opera.com
   </dl>
   <!--begin-copyright-->
   <p class=copyright><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=license>Copyright</a> &copy; 2009 <a
    href="http://www.w3.org/"><abbr title="World Wide Web
    Consortium">W3C</abbr></a><sup>&reg;</sup> (<a
    href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute
    of Technology">MIT</abbr></a>, <a
    href="http://www.ercim.org/"><abbr title="European Research Consortium
    for Informatics and Mathematics">ERCIM</abbr></a>, <a
    href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    and <a
    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    use</a> rules apply.</p>
   <!--end-copyright-->
   <hr title="Separator for header">
  </div>

  <h2 class="no-num no-toc" id=abstract>Abstract</h2>

  <p>This module describes features often used in printed publications. Most
   of the specified functionality involves some sort of generated content
   where content from the document is adorned, replicated, or moved in the
   final presentation of the document. Along with two other CSS3 modules
   &ndash; multi-column layout and paged media &ndash; this module offers
   advanced functionality for presenting structured documents on paged media.
   This specification only applies to the &lsquo;<code
   class=property>print</code>&rsquo; media type.

  <h2 class="no-num no-toc" id=status-of-this-document>Status of this
   document</h2>
  <!--begin-status-->

  <p>This is a public copy of the editors' draft. It is provided for
   discussion only and may change at any moment. Its publication here does
   not imply endorsement of its contents by W3C. Don't cite this document
   other than as work in progress.

  <p>The (<a
   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
   <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
   for discussion of this specification. When sending e-mail, please put the
   text &#8220;css3-gcpm&#8221; in the subject, preferably like this:
   &#8220;[<!---->css3-gcpm<!---->] <em>&hellip;summary of
   comment&hellip;</em>&#8221;

  <p>This document was produced by the <a href="/Style/CSS/members">CSS
   Working Group</a> (part of the <a href="/Style/">Style Activity</a>).

  <p>This document was produced by a group operating under the <a
   href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
   Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
   rel=disclosure>public list of any patent disclosures</a> made in
   connection with the deliverables of the group; that page also includes
   instructions for disclosing a patent. An individual who has actual
   knowledge of a patent which the individual believes contains <a
   href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
   Claim(s)</a> must disclose the information in accordance with <a
   href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
   W3C Patent Policy</a>.</p>
  <!--end-status-->

  <p>This WD describes functionality at various levels of maturity. Some
   features have been part of other WDs in the past and have already been
   implemented. These parts are fairly stable and unlikely to change much.
   Other features are still at the sketching stage. In general, features
   presented earlier in this draft are more mature that those presented later
   in the draft.

  <h2 class="no-num no-toc" id=table-of-contents><a name=contents>Table of
   contents</a></h2>
  <!--begin-toc-->

  <ul class=toc>
   <li><a href="#dependencies"><span class=secno>1 </span>Dependencies on
    other modules</a>

   <li><a href="#introduction"><span class=secno>2 </span>Introduction</a>

   <li><a href="#running-headers-and-footers"><span class=secno>3
    </span>Running headers and footers</a>
    <ul class=toc>
     <li><a href="#named-strings"><span class=secno>3.1 </span>Named
      strings</a>
      <ul class=toc>
       <li><a href="#setting-named-strings-the-string-set-pro"><span
        class=secno>3.1.1 </span>Setting named strings: the &lsquo;<code
        class=property>string-set</code>&rsquo; property</a>

       <li><a href="#using-named-strings"><span class=secno>3.1.2
        </span>Using named strings</a>
      </ul>

     <li><a href="#running-elements"><span class=secno>3.2 </span>Running
      elements</a>
    </ul>

   <li><a href="#leaders"><span class=secno>4 </span>Leaders</a>

   <li><a href="#cross-references"><span class=secno>5
    </span>Cross-references</a>
    <ul class=toc>
     <li><a href="#the-target-counter-and-target-counters-v"><span
      class=secno>5.1 </span>The &lsquo;<code
      class=css>target-counter</code>&rsquo; and &lsquo;<code
      class=css>target-counters</code>&rsquo; values</a>

     <li><a href="#the-target-text-value"><span class=secno>5.2 </span>The
      &lsquo;<code class=css>target-text</code>&rsquo; value</a>
    </ul>

   <li><a href="#footnotes"><span class=secno>6 </span>Footnotes</a>
    <ul class=toc>
     <li><a href="#turning-elements-into-footnotes"><span class=secno>6.1
      </span>Turning elements into footnotes</a>

     <li><a href="#the-footnote-area"><span class=secno>6.2 </span>The
      footnote area</a>

     <li><a href="#footnote-calls"><span class=secno>6.3 </span>Footnote
      calls</a>

     <li><a href="#footnote-markers"><span class=secno>6.4 </span>Footnote
      markers</a>

     <li><a href="#counting-footnotes"><span class=secno>6.5 </span>Counting
      footnotes</a>

     <li><a href="#laying-out-footnotes"><span class=secno>6.6 </span>Laying
      out footnotes</a>

     <li><a href="#footnote-magic"><span class=secno>6.7 </span>Footnote
      magic</a>
    </ul>

   <li><a href="#border-parts"><span class=secno>7 </span>Border parts</a>
    <ul class=toc>
     <li><a href="#the-border-parts-properties"><span class=secno>7.1
      </span>The &lsquo;<code class=property>border-parts</code>&rsquo;
      properties</a>
    </ul>

   <li><a href="#pulling-elements-the-target-pull-value"><span class=secno>8
    </span>Pulling elements: the &lsquo;<code
    class=css>target-pull()</code>&rsquo; value</a>

   <li><a href="#pushing-elements-named-flows"><span class=secno>9
    </span>Pushing elements: named flows</a>

   <li><a href="#hyphenation"><span class=secno>10 </span>Hyphenation</a>
    <ul class=toc>
     <li><a href="#hyphenate-properties"><span class=secno>10.1
      </span>Hyphenate properties</a>

     <li><a href="#named-counter-styles"><span class=secno>10.2 </span>Named
      counter styles</a>

     <li><a href="#the-symbols-list-style-type"><span class=secno>10.3
      </span>The &lsquo;<code class=css>symbols()</code>&rsquo;
      list-style-type</a>
    </ul>

   <li><a href="#character-substitution"><span class=secno>11
    </span>Character substitution</a>
    <ul class=toc>
     <li><a href="#the-text-replace-property"><span class=secno>11.1
      </span>The &lsquo;<code class=property>text-replace</code>&rsquo;
      property</a>
    </ul>

   <li><a href="#image-resolution"><span class=secno>12 </span>Image
    resolution</a>

   <li><a href="#page-marks-and-bleed-area"><span class=secno>13 </span>Page
    marks and bleed area</a>

   <li><a href="#bookmarks"><span class=secno>14 </span>Bookmarks</a>

   <li><a href="#cmyk-colors"><span class=secno>15 </span>CMYK colors</a>

   <li><a href="#creating-paged-presentations"><span class=secno>16
    </span>Creating paged presentations</a>

   <li><a href="#styling-blank-pages"><span class=secno>17 </span>Styling
    blank pages</a>

   <li><a href="#page-floats"><span class=secno>18 </span>Page floats</a>

   <li><a href="#advanced-multi-column-layout"><span class=secno>19
    </span>Advanced multi-column layout</a>
    <ul class=toc>
     <li><a href="#the-float-offset-property"><span class=secno>19.1
      </span>The &lsquo;<code class=property>float-offset</code>&rsquo;
      property</a>
    </ul>

   <li><a href="#page-lists"><span class=secno>20 </span>Page lists</a>
    <ul class=toc>
     <li><a href="#the-page-property"><span class=secno>20.1 </span>The
      &lsquo;<code class=property>page</code>&rsquo; property</a>
    </ul>

   <li><a href="#continuation-markers"><span class=secno>21
    </span>Continuation markers</a>

   <li><a href="#change-bars"><span class=secno>22 </span>Change bars</a>

   <li><a href="#line-numbers"><span class=secno>23 </span>Line numbers</a>

   <li><a href="#generated-lists"><span class=secno>24 </span>Generated
    lists</a>
    <ul class=toc>
     <li><a href="#the-prototype-properties"><span class=secno>24.1
      </span>The prototype properties</a>

     <li><a href="#toc"><span class=secno>24.2 </span>TOC</a>

     <li><a href="#glossary"><span class=secno>24.3 </span>Glossary</a>

     <li><a href="#index0"><span class=secno>24.4 </span>Index</a>

     <li><a href="#a-more-complex-example"><span class=secno>24.5 </span>A
      more complex example</a>
    </ul>

   <li><a href="#conformance"><span class=secno>25 </span>Conformance</a>

   <li><a href="#appendix-a-default-style-sheet"><span class=secno>26
    </span>Appendix A: Default style sheet</a>

   <li class=no-num><a href="#acknowledgments">Acknowledgments</a>

   <li class=no-num><a href="#references">References</a>
    <ul class=toc>
     <li class=no-num><a href="#normative-references">Normative
      references</a>

     <li class=no-num><a href="#other-references">Other references</a>
    </ul>

   <li class=no-num><a href="#index">Index</a>

   <li class=no-num><a href="#property-index">Property index</a>
  </ul>
  <!--end-toc-->

  <h2 id=dependencies><span class=secno>1 </span>Dependencies on other
   modules</h2>

  <p>This CSS3 module has normative references to the following other CSS3
   modules:

  <ul>
   <li><a href="#CSS3LIST" rel=biblioentry>[CSS3LIST]<!--{{!CSS3LIST}}--></a>

   <li><a href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>
  </ul>

  <p>This CSS3 module has non-normative references to the following other
   CSS3 modules:

  <ul>
   <li><a href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>

   <li><a href="#CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>

   <li>[[CSS3MULTICOL]]
  </ul>

  <h2 id=introduction><span class=secno>2 </span>Introduction</h2>

  <p>(This section is not normative.)

  <p>This specification describes features often used in printed
   publications. Some of the proposed functionality (e.g., hyphenation, the
   new list style types, and border segments) may also used with other media
   types. However, this specification is only concerned with the &lsquo;<code
   class=property>print</code>&rsquo; media type.

  <h2 id=running-headers-and-footers><span class=secno>3 </span>Running
   headers and footers</h2>

  <p>To aid navigation in printed material, headers and footers are often
   printed in the page margins. <a href="#CSS3PAGE"
   rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a> describes how to place
   headers and footers on a page, but not how to fetch headers and footers
   from elements in the document. This specification offers two ways to
   achieve this. The first mechanism is <dfn id=named-strings0>named
   strings</dfn> which <em>copies</em> the text (without style, structure, or
   replaced content) from one element for later reuse in margin boxes. The
   second mechanism is <dfn id=running-elements0>running elements</dfn> which
   <em>moves</em> elements (with style, structure, and replaced content) into
   a margin box.

  <h3 id=named-strings><span class=secno>3.1 </span>Named strings</h3>
  <!--
<p>Named strings are discussed both in the CSS3 Generated and Replaced
Content (section 9) and in CSS3 Paged Media (several places). For a
proposed definition of the property, one has to go back to the <a href="http://www.w3.org/1999/06/WD-css3-page-19990623">CSS3 draft from 1999</a>
1999:
-->

  <p>Named strings can be thought of as variables that can hold one string of
   text each. Named strings are created with the &lsquo;<code
   class=property><a href="#string-set">string-set</a></code>&rsquo; property
   which copies a string of text into the named string. Only text is copied;
   not style, structure, or replaced content.

  <div class=example>
   <p>Consider this code:

   <pre>
h1 { string-set: title content() }
</pre>

   <p>Whenever an <code>h1</code> element is encountered, its textual content
    is copied into a named string called <em>title</em>. Its content can be
    retrieved in the &lsquo;<code class=property>content</code>&rsquo;
    property:

   <pre>
@page :right { @top-right { content: string(title) }}
</pre>
  </div>

  <h4 id=setting-named-strings-the-string-set-pro><span class=secno>3.1.1
   </span>Setting named strings: the &lsquo;<code class=property><a
   href="#string-set">string-set</a></code>&rsquo; property</h4>

  <table class=propdef>
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=string-set>string-set</dfn>

    <tr>
     <td><em>Value:</em>

     <td>[[ &lt;identifier> &lt;content-list>] [, &lt;identifier>
      &lt;content-list>]* ] | none

    <tr>
     <td><em>Initial:</em>

     <td>none

    <tr>
     <td><em>Applies to:</em>

     <td>all elements

    <tr>
     <td><em>Inherited:</em>

     <td>no

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Media:</em>

     <td>all

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>as specified value
  </table>

  <p>The &lsquo;<code class=property><a
   href="#string-set">string-set</a></code>&rsquo; property accepts a
   comma-separated list of named strings. Each named string is followed by a
   content list that specifies which text to copy into the named string.
   Whenever an element with value of &lsquo;<code class=property><a
   href="#string-set">string-set</a></code>&rsquo; different from
   &lsquo;<code class=css>none</code>&rsquo; is encountered, the named
   strings are assigned their respective value.

  <p>For the &lsquo;<code class=property><a
   href="#string-set">string-set</a></code>&rsquo; property,
   &lt;content-list> expands to one or more of these values, in any order:

  <dl>
   <dt>&lt;string&gt;

   <dd>a string, e.g. "foo"

   <dt>&lt;counter&gt;

   <dd>the counter() or counters() function, as per <a
    href="http://www.w3.org/TR/CSS21/syndata.html#counter">CSS 2.1 section
    4.3.5</a>

   <dt>&lt;content&gt;

   <dd>the &lsquo;<code class=css>content()</code>&rsquo; function returns
    the content of elements and pseudo-elements. The functional notation
    accepts an optional argument:
    <dl>
     <dt>&lsquo;<code class=css>content()</code>&rsquo;

     <dd>Without any arguments, the function returns the textual content of
      the element, not including the content of its ::before and ::after
      pseudo-element. The content of the element's descendants, including
      their respective ::before and ::after pseudo-elements, are included in
      the returned content.

     <dt>&lsquo;<code class=css>content(before)</code>&rsquo;

     <dd>The function returns the textual content of the ::before
      pseudo-element the content of the element.

     <dt>&lsquo;<code class=css>content(after)</code>&rsquo;

     <dd>The function returns the textual content of the ::after
      pseudo-element the content of the element.

     <dt>&lsquo;<code class=css>content(first-letter)</code>&rsquo;

     <dd>The function returns the first letter of the content of the element.
      The definition of a letter is the same as for :first-letter
      pseudo-elements.
      <p class=note>The expected use for &lsquo;<code
       class=css>content(first-letter)</code>&rsquo; is to create one-letter
       headers, e.g., in dictionaries.</p>
    </dl>
  </dl>
  <!--<p class="issue">Should target-counter() and leader() also be allowed?</p>-->

  <p>Named strings can only hold the result of one assignment; whenever a new
   assignment is made to a named string, its old value is replaced.

  <p class=note>User agents, however, must be able to remember the result of
   more than one assignment as the &lsquo;<code
   class=css>string()</code>&rsquo; functional value (described below) can
   refer to different assignments.

  <p>The scope of a named string is the page of the element to which the
   &lsquo;<code class=property><a
   href="#string-set">string-set</a></code>&rsquo; property is attached and
   subsequent pages.

  <p>The name space of named strings is different from other sets of names in
   CSS.

  <p>The &lsquo;<code class=property><a
   href="#string-set">string-set</a></code>&rsquo; property copies text as
   well as white-space into the named string.

  <div class=example>
   <pre>
h2 { 
  string-set: header "Chapter " counter(header) ": " content();
  counter-increment: header;
}
</pre>

   <p>Note that the string called "header" is different from the counter with
    the same name. The above code may result in <em>header</em> being set to
    "Chapter 2: Europa".
  </div>

  <div class=example>
   <p>This example results in the same value being assigned to
    <em>header</em> as in the previous example. <!--note namespace-->

   <pre>
h2:before { content: "Chapter " counter(header) } 
h2 { 
  string-set: header content(before) content();
  counter-increment: header } 
</pre>
  </div>

  <div class=example>
   <pre>
dt { string-set: index content(first-letter) }
</pre>
  </div>

  <div class=example>
   <p>The content is copied regardless of other settings on the element. In
    this example, H1 elements are not displayed, but their content is copied
    into the named string.

   <pre>
h1 { 
  display: none;
  string-set: header content();
}
</pre>
  </div>

  <h4 id=using-named-strings><span class=secno>3.1.2 </span>Using named
   strings</h4>

  <p>The content of named strings can be recalled by using the &lsquo;<code
   class=css>string()</code>&rsquo; value on the &lsquo;<code
   class=property>content</code>&rsquo; property. The &lsquo;<code
   class=css>string()</code>&rsquo; value has one required argument, namely
   the name of the string.

  <div class=example>
   <pre>
@page { @top-center { content: string(header) }}
@page { @right-middle { content: string(index) }}
@page { @top-left { content: string(entry) }}
h1 { string-set: header "Chapter " counter(chapter) content() }
dt { string-set: index content(first-letter), entry content() }
</pre>
  </div>

  <p>If the value of the named string is changed by an element on a certain
   page, the named string may have several values on that page. In order to
   specify which of these values should be used, an optional argument is
   accepted on the &lsquo;<code class=css>string()</code>&rsquo; value. This
   argument can have one of four keywords:

  <ul>
   <li>&lsquo;<code class=css>start</code>&rsquo;: the named string's entry
    value for that page is used.

   <li>&lsquo;<code class=css>first</code>&rsquo;: the value of the first
    assignment is used. If there is no assignment on the page, the start
    value is used. &lsquo;<code class=css>first</code>&rsquo; is the default
    value.

   <li>&lsquo;<code class=css>last</code>&rsquo;: the named string's exit
    value for that page is used

   <li>&lsquo;<code class=css>first-except</code>&rsquo;: similar to
    &lsquo;<code class=css>first</code>&rsquo;, except on the page where the
    value was assigned. On that page, the empty string is used.
  </ul>

  <div class=example>
   <p>In this example, the first term on the page will be shown in the top
    left corner and the last term on the page will be shown in the top right
    corner. In top center of the page, the first letter of first term will be
    shown.

   <pre>
@page { @top-left { content: string(term, first) }}
@page { @top-right { content: string(term, last) }}
@page { @top-center { content: string(index, first) }}
dt { string-set: index content(first-letter), term content() }
</pre>
  </div>

  <div class=example>
   <p>In this example, the header in the top center will be blank on pages
    where &lsquo;<code class=css>h1</code>&rsquo; elements appear. On other
    pages, the string of the previous &lsquo;<code class=css>h1</code>&rsquo;
    element will be shown.

   <pre>
@page { @top-center { content: string(chapter, first-except) }}
h1 { string-set: chapter content() }
</pre>
  </div>

  <p>If the named string referred to in a &lsquo;<code
   class=css>string()</code>&rsquo; value has not been assigned a value, the
   empty string is used.

  <div class=out>
   <h3 id=running-elements><span class=secno>3.2 </span>Running elements</h3>

   <p>Named strings, as described above, can only hold textual content; any
    style, structure or replaced content associated with the element is
    ignored. To overcome this limitation, a way of moving elements into
    running headers and footers is introduced.

   <p>Elements that are moved into headers and footers are repeated on
    several pages; they are said to be <em><a
    href="#running-elements0">running elements</a></em>. To support running
    elements, a new value &ndash; running() &ndash; is introduced on the
    &lsquo;<code class=property>position</code>&rsquo; property. It has one
    required argument: the name by which the running element can be referred
    to. A running element is not shown in its natural place; there it is
    treated as if &lsquo;<code class=css>display: none</code>&rsquo; had been
    set. Instead, the running element may be displayed in a margin box.

   <p>Like counters and named strings, the name of a running element is
    chosen by the style sheet author, and the names have a separate name
    space. A running element can hold one element, including its
    pseudo-elements and its descendants. Whenever a new element is assigned
    to a running element, the old element is lost.

   <p class=note>User agents, however, must be able to remember the result of
    more than one assignment as the &lsquo;<code
    class=css>element()</code>&rsquo; value (described below) can refer to
    different assignments.

   <p>Running elements inherit through their normal place in the structure of
    the document.

   <div class=example>
    <pre>
title { position: running(header) }
@page { @top-center {
  content: element(header) }
}
</pre>
   </div>

   <p>Like the &lsquo;<code class=css>string()</code>&rsquo; value, the
    &lsquo;<code class=css>element()</code>&rsquo; value accepts an optional
    second argument:

   <dl>
    <dt>&lsquo;<code class=css>start</code>&rsquo;

    <dt>&lsquo;<code class=css>first</code>&rsquo;

    <dt>&lsquo;<code class=css>last</code>&rsquo;

    <dt>&lsquo;<code class=css>first-except</code>&rsquo;
   </dl>

   <p>The keywords have the same meaning as for the &lsquo;<code
    class=css>string()</code>&rsquo; value.

   <p>The &lsquo;<code class=css>element()</code>&rsquo; value cannot be
    combined with any other values.

   <div class=example>
    <p>In this example, the header is hidden from view in all media types
     except print. On printed pages, the header is displayed top center on
     all pages, except where h1 elements appear.

    <pre>
&lt;style>
  div.header { display: none }
  @media print {
  div.header {
    display: block;
    position: running(header);
  }
  @page { @top-center { content: element(header, first-except) }}
&lt;/style>
...
&lt;div class="header">Introduction&lt;/div>
&lt;h1 class="chapter">An introduction&lt;/div>

</pre>
   </div>

   <div class=example>
    <p>This code illustrates how to change the running header on one page in
     the middle of a run of pages:

    <pre>
...
&lt;style>
@page { @top-center {
  content: element(header, first) }}
.header { position: running(header) }
.once { font-weight: bold }
&lt;/style>
...
&lt;div class="header">Not now&lt;/div>
&lt;p>Da di ha di da di ...
  &lt;span class="header once">NOW!&lt;/span>
  &lt;span class="header">Not now&lt;/span>
  ... da di ha di hum.&lt;/p>
...
</pre>
    The header is "Not now" from the outset, due to the "div" element. The
    first "span" element changes it to "<b>NOW!</b>" on the page where the
    "span" element would have appeared. The second "span" element, which
    would have appeared on the same page as the first is not used because the
    &lsquo;<code class=css>first</code>&rsquo; keyword has been specified.
    However, the second "span" element still sets the exit value for "header"
    and this value is used on subsequent pages.</div>
  </div>

  <h2 id=leaders><span class=secno>4 </span>Leaders</h2>

  <p>A leader is a visual pattern that guides the eye. Typically, leaders are
   used to visually connect an entry in a list with a corresponding code. For
   example, there are often leaders between titles and page numbers in a
   table of contents (TOC). Another example is the phone book where there are
   leaders between a name and a telephone number.

  <p>In CSS3, a leader is composed of series of glyphs through the
   &lsquo;<code class=css>leader()</code>&rsquo; value on the &lsquo;<code
   class=property>content</code>&rsquo; property. The functional notation
   accepts one value which describes the glyph pattern that make up the
   leader. These values are allowed:

  <ul>
   <li>leader(dotted)

   <li>leader(solid)

   <li>leader(space)

   <li>leader(&lt;string&gt;)
  </ul>

  <p>Using the keyword values is equivalent to setting a string value. The
   table below shows the equivalents:

  <table class=border>
   <tbody>
    <tr>
     <th>Keyword

     <th>String

     <th>Unicode characters

    <tr>
     <td>leader(dotted)

     <td>leader(&lsquo;<code class=css>. </code>&rsquo;)

     <td>\002E \0020

    <tr>
     <td>leader(solid)

     <td>leader(&lsquo;<code class=css>_</code>&rsquo;)

     <td>\005F

    <tr>
     <td>leader(space)

     <td>leader(&lsquo;<code class=css> </code>&rsquo;)

     <td>\0020
  </table>

  <p class=issue>Can leaders also be composed of images or SVG? <!--
<p class="issue">Some fonts may not have suitable glyphs for all
patterns. For example, in some Eastern languages, the alignment of the
shape within the glyph may not be optimal for creating leaders.
-->
   <!--<p class="issue">Are the keywords really necessary?</p>-->

  <p>The string inside the parenthesis is called the <em>leader string</em>.

  <p>In its simplest form, the &lsquo;<code
   class=property>content</code>&rsquo; property only takes one &lsquo;<code
   class=css>leader()</code>&rsquo; value:

  <div class=example>
   <pre>
heading::after { content: leader(dotted) }
</pre>
  </div>

  <p>The leader string must be shown in full at least once and this
   establishes the minimum length of the leader. To fill the available space,
   the leader string is repeated as many times as possible in the writing
   direction. At the end of the leader, a partial string pattern may be
   shown. White space in leaders is collapsed according to the values on
   white-space properties.
   <!-- <span class="issue">Or, partial strings be avoided?</span> -->
   <!--<p class="issue">Should other properties influence the appearance of leaders?-->
   

  <p>These properties influence the appearance of leaders: all font
   properties, text properties, &lsquo;<code
   class=property>letter-spacing</code>&rsquo;, white-space properties,
   background properties, and &lsquo;<code
   class=property>color</code>&rsquo;.

  <p>User Agents should attempt to align corresponding glyphs from the leader
   pattern between consecutive lines.

  <p>In a more complex example, the &lsquo;<code
   class=property>leader</code>&rsquo; value is combined with other values on
   the &lsquo;<code class=property>content</code>&rsquo; property:

  <div class=example>
   <pre>
ul.toc a::after {
  content: leader(". . . ") target-counter(attr(href, url), page);
}
</pre>
  </div>

  <p>If the content connected by a leader end up on different lines, the
   leader will be present on all lines. Each leader fragment honors the
   minimum length of the leader.

  <div class=example>
   <p>Consider this code:

   <pre>
&lt;style>
.name::after { content: leader(dotted) }
&lt;/style>
&lt;div class="entry">
&lt;span class="name">John Doe&lt;/span>
&lt;span class="number">123456789&lt;/span>
&lt;/div>
</pre>

   <p>If the name and number end up on different lines (e.g., in a narrow
    column), it may be formatted like this:

   <pre>
John Doe....
...123456789
</pre>
  </div>

  <p>To determine the length of the leaders, user agents must do the
   following for each line:

  <ol>
   <li>Lay out the content with leaders of minimum lengths

   <li>Determine the empty space left on the line.

   <li>Distribute the empty space between the leaders on the line. Glyphs
    must not be shown partially. All leaders on the line should, to the
    extent possible, have the same length. This may not always be possible as
    the minimum leader length must be honored.

   <li>Fill the empty space with the specified leader pattern.
  </ol>

  <div class=example>
   <p>Consider this code:

   <pre>
&lt;style>
cite::before { content: leader('  ') }
&lt;/style>
&lt;blockquote>
  Bla great bla bla world bla bla
  empire bla bla color bla bla
  history bla bla forever.
    &lt;cite>John Johnson&lt;/cite>
&lt;/blockquote>
</pre>

   <p>Depending on the width of the containing block, this may be rendered
    as:

   <pre>
  Bla great bla bla world bla bla
  empire bla bla color bla bla
  history bla bla forever.   John 
  Johnson
</pre>

   <p>However, this rendering is preferable:

   <pre>
  Bla great bla bla world bla bla
  empire bla bla color bla bla
  history bla bla forever.
                     John Johnson
</pre>

   <p>To indicate that <q>John Johnson</q> should be kept on one line, this
    rule can be added to the style sheet:

   <pre>
cite { text-wrap: suppress }
</pre>

   <p>Until &lsquo;<code class=property>text-wrap</code>&rsquo; is widely
    supported, this rule can also be used:

   <pre>
cite { white-space: nowrap }
</pre>

   <p>If the containing element is wider, this may be the resultant
    presentation:

   <pre>
  Bla great bla bla world bla bla empire
  bla bla color bla bla history bla bla 
  forever.                  John Johnson
</pre>
  </div>

  <h2 id=cross-references><span class=secno>5 </span>Cross-references</h2>

  <p>It is common to refer to other parts of a document by way of a section
   number (e.g., "See section 3.4.1"), a page number (e.g., "See discussion
   on page 72"), or a string (e.g., "See the chapter on Europe"). Being able
   to resolve these cross-references automatically saves time and reduces the
   number of errors.

  <h3 id=the-target-counter-and-target-counters-v><span class=secno>5.1
   </span>The &lsquo;<code class=css>target-counter</code>&rsquo; and
   &lsquo;<code class=css>target-counters</code>&rsquo; values</h3>

  <p>Numerical cross-references are generated by &lsquo;<code
   class=css>target-counter()</code>&rsquo; and &lsquo;<code
   class=css>target-counters()</code>&rsquo; values that fetch the value of a
   counter at the target end of the link. These functions are similar to the
   &lsquo;<code class=css>counter()</code>&rsquo; and &lsquo;<code
   class=css>counters()</code>&rsquo; functions, except that they fetch
   counter values from remote elements. &lsquo;<code
   class=css>target-counter()</code>&rsquo; has two required arguments: the
   url of the link, and the name of a counter. &lsquo;<code
   class=css>target-counters()</code>&rsquo; has three required arguments:
   the url of the link, the name of a counter, and a separator string. Both
   functions accepts an optional argument at the end that describes which
   list style type to use when presenting the resulting number; &lsquo;<code
   class=css>decimal</code>&rsquo; being the default.

  <div class=example>
   <p>This style sheet specifies that a string like " (see page 72)" is added
    after a link:

   <pre>
a::after { content: "(see page " target-counter(attr(href, url), page, decimal) ")" }
</pre>
  </div>

  <div class=example>
   <p>This style sheet specifies that a string like " (see section 1.3.5)" is
    added after a link:

   <pre>
a::after { content: "(see section " target-counters(attr(href, url), section, ".", decimal) ")" }
</pre>
  </div>

  <h3 id=the-target-text-value><span class=secno>5.2 </span>The &lsquo;<code
   class=css>target-text</code>&rsquo; value</h3>

  <p>Textual cross-references are generated by &lsquo;<code
   class=css>target-text()</code>&rsquo; which fetches the textual content
   from the target end of the link. Only text is copied; not style,
   structure, or replaced content. &lsquo;<code
   class=css>target-text()</code>&rsquo; has one required argument: the url
   of the link. An optional second argument specifies exactly which content
   is fetched. There are four possible values:

  <dl>
   <dt>&lsquo;<code class=css>content()</code>&rsquo;

   <dd>refers to the textual content of the element, not including the
    content of its ::before and ::after pseudo-element. The content of the
    element's descendants, including their respective ::before and ::after
    pseudo-elements, are included in the returned content.

   <dt>&lsquo;<code class=css>content(before)</code>&rsquo;

   <dd>refers to the content of the element's ::before pseudo-element. This
    is the default value.

   <dt>&lsquo;<code class=css>content(after)</code>&rsquo;

   <dd>refers to the content of the element's ::after pseudo-element

   <dt>&lsquo;<code class=css>content(first-letter)</code>&rsquo;

   <dd>refers to the first letter of the textual content of the element, not
    including the content of its ::before and ::after pseudo-element.
  </dl>

  <div class=example>
   <p>To generate this text

   <blockquote>
    <p>See Chapter 3 ("A better way") on page 31 for an in-depth evaluation.
   </blockquote>
   from this markup:
   <pre>
&lt;p>See &lt;a href="#chx">this chapter&lt;/a> for an in-depth evaluation.
...
&lt;h2 id="chx">A better way&lt;/h2>
</pre>
   this CSS code can be used:
   <pre>
h2 { counter-increment: chapter }
a { content: "Chapter " target-counter(attr(href, url), chapter) 
   ' ("'  target-text(attr(href), content()) '") on page '
   target-counter(attr(href, url), page);
</pre>
  </div>

  <h2 id=footnotes><span class=secno>6 </span>Footnotes</h2>

  <p>A footnote is a note typically placed at the bottom of a page that
   comments on or cites a reference. References to footnotes are marked with
   a <em>note-call</em> in the main text. The rendering of footnotes is
   complex. As far as possible, footnotes try to reuse other parts of CSS.
   However, due to the typographic traditions of footnotes, some new
   functionality is required to support footnotes in CSS:

  <p>In order to support footnotes in CSS, the following functionality is
   added:

  <ul>
   <li>one new value on the &lsquo;<code class=property>float</code>&rsquo;
    property: &lsquo;<code class=css>footnote</code>&rsquo;

   <li>one new page area: &lsquo;<code class=css>@footnote</code>&rsquo;

   <li>two new pseudo-elements: &lsquo;<code
    class=css>::footnote-call</code>&rsquo; and &lsquo;<code
    class=css>::footnote-marker</code>&rsquo;

   <li>one predefined counter: &lsquo;<code class=css>footnote</code>&rsquo;

   <li>one new value on the &lsquo;<code class=property>content</code>&rsquo;
    property: &lsquo;<code class=css>target-pull()</code>&rsquo;

   <li>border segments

   <li>two new &lsquo;<code class=property>list-style-type</code>&rsquo;
    values: &lsquo;<code class=css>super-decimal</code>&rsquo;, and
    symbol(...)
  </ul>

  <div class=example>
   <p>In its simplest form, making a footnote is simple.

   <pre>
&lt;style>
.footnote { float: footnote }
&lt;/style>

&lt;p>A sentence consists of words. &lt;span class="footnote">Most often.&lt;/span>.
</pre>

   <p>In this example, the text <q>Most often.</q> will be placed in a
    footnote. A note-call will be left behind in the main text and a
    corresponding marker will be shown next to the footnote. Here is one
    possible rendering:

   <pre>
A sentence consists of words. &#xB9;

&#xB9; Most often.
</pre>
  </div>

  <div class=example>
   <p>To support legacy browsers, it is often better to make a link to the
    note rather than including the text inline. This example shows how to
    fetch the content of a note and place it in a footnote.

   <pre>
&lt;style>
@media print {
  .footnote { 
    float: footnote;
    content: target-pull(attr(href, url)) }
  .call { display: none }
}
&lt;/style>
...
&lt;p>A sentence consists of words&lt;a class="footnote" href="#words"> [3]&lt;/a>.
...
&lt;p id=words>&lt;span class="call">[3]&lt;/span> Most often.
</pre>

   <p>When shown in a legacy browser, the content of the element will be
    shown as a clickable link to an endnote. When printed according to this
    specification, there will be a footnote:

   <pre>
A sentence consists of words&#xB9;.

&#xB9; Most often.
</pre>
  </div>

  <div class=example> Consider this markup:
   <pre>
&lt;p>Sorry, &lt;span title="This is, of course, a lie.">we're closing for lunch&lt;/span>.
</pre>

   <p>The content of the "title" attribute can be turned into a footnote with
    this code:

   <pre>
span[title]::after { 
  content: attr(title);
  float: footnote;
}
</pre>
  </div>

  <h3 id=turning-elements-into-footnotes><span class=secno>6.1 </span>Turning
   elements into footnotes</h3>

  <p>An element with &lsquo;<code class=css>float: footnote</code>&rsquo;
   (called a <em>footnote element</em>) is moved to the <em>footnote
   area</em> and a <em>footnote-call</em> pseudo-element is put in its
   original place.

  <div class=example>
   <pre>
span.footnote { 
  float: footnote;
}
</pre>
  </div>

  <p>For each new footnote element, the &lsquo;<code
   class=css>footnote</code>&rsquo; counter is automatically incremented.

  <p>Footnote elements are presented inside the <em>footnote area</em>, but
   they inherit through their normal place in the structure of the document.
   <!--
<p class="issue">There has been a number of proposals on how to achieve this, including &lsquo;<code class=css>position: footnote</code>&rsquo;, &lsquo;<code class=css>flow: footnote</code>&rsquo;, and &lsquo;<code class=css>display: footnote</code>&rsquo;. The current thinking is that &lsquo;<code class=property>float</code>&rsquo; is suitable as the content still takes up space.
-->
   

  <h3 id=the-footnote-area><span class=secno>6.2 </span>The footnote area</h3>

  <p>All elements with &lsquo;<code class=css>float: footnote</code>&rsquo;
   are moved to the <em>footnote area</em>. The footnote area is described by
   an @footnote-rule inside the @page-rule. By default, the footnote area
   appears at the bottom of the page, but it can be positioned using page
   floats (as described below) and &lsquo;<code class=css>position:
   fixed</code>&rsquo;.

  <div class=example>
   <pre>
@page {
  @footnote { 
    float: bottom page;
    width: 100%;
  }
}
</pre>
  </div>
  <!--<p>An element with &lsquo;<code class=css>float: footnote</code>&rsquo; inherits from its parent, not from @footnote.-->
  <!--
<p>The footnote area does not have to be placed at the bottom of the
page. It can be moved to anywhere on the page using the &lsquo;<code class=property>float</code>&rsquo; property or
&lsquo;<code class=css>position: fixed</code>&rsquo;. 
-->

  <div class=example>
   <p>These rules place the footnote area on the left side of the page:

   <pre>
@page {
  @footnote { 
    position: fixed;
    top: 10em;
    left: 3em;
    width: 5em;
  }
}
</pre>
  </div>

  <div class="example issue">
   <p>How do we place the footnote area in a certain column? Perhaps:

   <pre>
@page {
  @footnote { 
    float: bottom left multicol;
    width: 1gr;
  }
}
</pre>
  </div>
  <!--
<p class=issue>How should one indicate that the footnote area should
span columns? Typically, footnotes are put inside columns rather than
spanning the full width, but there could be exceptions.
-->

  <p>The content of the footnote area is considered to come before other
   content which may compete for the same space on the same page.

  <div class=example>
   <pre>
@page { @footnote { float: bottom page}}
div.figure { float: bottom page }
</pre>

   <p>If figures and footnotes are on the same page, the footnotes will
    appear below the figures as they are floated to the bottom before the
    figures.
  </div>

  <p>Potentially, every page has a footnote area. If there are no footnotes
   on the page, the footnote area will not take up any space. If there are
   footnotes on a page, the layout of the footnote area will be determined by
   the properties/values set on it, and by the footnote elements
   inside it.

  <p>These properties apply to the footnote area: &lsquo;<code
   class=property>content</code>&rsquo;, &lsquo;<code
   class=property>border</code>&rsquo;, &lsquo;<code
   class=property>padding</code>&rsquo;, &lsquo;<code
   class=property>margin</code>&rsquo;, &lsquo;<code
   class=property>height</code>&rsquo;, &lsquo;<code
   class=property>width</code>&rsquo;, &lsquo;<code
   class=property>max-height</code>&rsquo;, &lsquo;<code
   class=property>max-width</code>&rsquo;, &lsquo;<code
   class=property>min-height</code>&rsquo;, &lsquo;<code
   class=property>min-width</code>&rsquo;, the background properties. <!--
<p class="note">In published books, it is customary for the footnote
area to be limited to less than half the height of the page area. Long
footnotes may need more space, and the customary solution is for
footnotes to span several pages. To achieve this, the &lsquo;<code class=property>max-height</code>&rsquo;
property should be used. However, footnotes spanning several pages is
an advanced feature which is not a conformance requirement for this
specification.
-->
   

  <div class=example>
   <p>This example uses some of the applicable properties on @footnote:

   <pre>
@footnote {
  margin-top: 0.5em;
  border-top: thin solid black;
  border-length: 4em; /* border-parts: 4em */
  padding-top: 0.5em;
}
</pre>

   <p>The result of this code is that a footnote area will have some margin
    above the border. Unlike normal borders, only part of the border is
    visible due to the &lsquo;<code
    class=property>border-length</code>&rsquo; property. Underneath the
    border, there will be padding.
  </div>
  <!--
<p class="issue">Footnotes in tables and floats may be problematic. In
some cases, the author may want the footnote to go at the end of the
table or float instead of the bottom of the page.
-->

  <h3 id=footnote-calls><span class=secno>6.3 </span>Footnote calls</h3>

  <p>When an element is moved to the footnote area, a <em>footnote-call</em>
   is left behind. By default, User Agents must behave as if this code is
   part of the default style sheet:

  <pre>
::footnote-call {
  content: counter(footnote, super-decimal);
}
</pre>

  <p>The resulting note call is a super-script decimal number. <!--
<div class="example">

The content and style of the footnote-call is set on the
&lsquo;<code class=css>footnote-call</code>&rsquo; pseudo-element.

</div>
-->
   <!--
<p class="issue">Should any white space characters between the
note-call and the preceding content be removed?
-->
   <!--
<div class="example">
The goal is to achieve this result:

<pre>
  ... some notion¹
</pre>

<p>rather than this:

<pre>
  ... some notion ¹
</pre>
</div>
-->
   

  <h3 id=footnote-markers><span class=secno>6.4 </span>Footnote markers</h3>

  <p>A ::footnote-marker pseudo-element is added to each footnote element.
   User agents must, by default, show the "footnote" counter in the
   footnote-marker.

  <div class=example>
   <p>User Agents may display footnote-calls and footnote-markers this way by
    default:

   <pre>
::footnote-call {
  content: counter(footnote, super-decimal);
}
::footnote-marker {
  content: counter(footnote, super-decimal);
}
</pre>
  </div>

  <p>Marker elements are discussed in more detail in the CSS Lists module <a
   href="#CSS3LIST" rel=biblioentry>[CSS3LIST]<!--{{!CSS3LIST}}--></a>. One
   suggested change to that module is to honor the value of &lsquo;<code
   class=property>list-style-position</code>&rsquo; on the ::footnote-marker
   pseudo-element itself rather than the corresponding list-item element.
   Further, one clarification to the horizontal placement of the marker is
   suggested: the <em>margin</em> box of the marker box is horizontally
   aligned with the start of the line box.

  <h3 id=counting-footnotes><span class=secno>6.5 </span>Counting footnotes</h3>

  <p>The "footnote" counter is automatically incremented each time a footnote
   is generated. That is, the "footnote" counter is incremented by one each
   time an element with &lsquo;<code class=css>float: footnote</code>&rsquo;
   appears.

  <p>The footnote counter can be reset with the &lsquo;<code
   class=property>counter-reset</code>&rsquo; property.

  <div class=example> This code resets the "footnote" counter on a per-page
   page basis:
   <pre>
@page { counter-reset: footnote }
</pre>
  </div>

  <p class=issue>Should one also be able to manually increment the "footnote"
   counter? <!--
<p>The &lsquo;<code class=property>counter-increment</code>&rsquo; property can be set in the @footnote rule.
Each time an element with &lsquo;<code class=css>float: footnote</code>&rsquo; is found, the corresponding
counter is incremented.

<div class="example">
<p>This rule is part of the default style sheet:

<pre>
@page {
  @footnote {
    counter-increment: footnote;
  }
}
</pre>

As a result, the "footnote" counter is incremented each time a footnote is generated.
</div>
-->
   

  <h3 id=laying-out-footnotes><span class=secno>6.6 </span>Laying out
   footnotes</h3>

  <p>Footnotes must appear as early as possible under the following
   constraints:

  <ol>
   <li>A footnote marker may not appear on an earlier page than the footnote
    call.

   <li>Footnotes may not appear out of document order.
    <!--<span class="issue">(What order is that: the document order or the visual order?
    Probably the document order, the same order as the footnote counter
    values, although the visual order of the footnote calls may be
    different, due to their occurrence in positioned and floating
    elements.)</span>-->
    

   <li>The footnote area is limited in size by &lsquo;<code
    class=property>max-height</code>&rsquo;, unless the page contains only
    footnotes. (E.g., if at the end of the document there are still footnotes
    unprinted, the User Agent can use the whole page to display footnotes.)

   <li>If there is a footnote call on a page, the footnote area may not be
    empty, unless its &lsquo;<code class=property>max-height</code>&rsquo; is
    too small.
  </ol>

  <h3 id=footnote-magic><span class=secno>6.7 </span>Footnote magic</h3>

  <p>When rendering footnotes, User Agents may apply certain heuristics to
   improve the presentation. For example, the space between a footnote-call
   and surrounding text may be adjusted. Another example is the height of the
   footnote area; it may be heuristically constrained to limit the area that
   is used for footnotes.

  <p>The "footnote" counter represents another kind of magic; it is
   automatically created and incremented each time an element is turned into
   a footnote, and the footnotes and footnote-calls are automatically labeled
   with the value of the footnote counter. <!--
<h2>Sidenotes</h2>

<p>Sidenotes are supported the same way as footnotes; only the name
and the settings in the default style sheet differentiates the two.

<p class=note>The motivation for having another page-based area into
which content can be floated is that footnotes and sidenotes are
often used in the same document. 

<div class="example">
<p>This example moves images to the outside margin of pages:

<pre>
@page :left { 
  margin-left: 10em;
  @sidenote { position: fixed; left: -8em; width: 6em }
}
@page :right { 
  margin-right: 10em;
  @sidenote { position: fixed; right: -8em; width: 6em }
}
img { float: sidenote }
</pre>
</div>

<p class=note>The reason for having both a footnote and a sidenote area
on every page is that some documents use both.

<p class=issue>Should there be a mechanism to create new areas like
footnote/sidenote, or are two "magic" areas enough?
-->
   

  <h2 id=border-parts><span class=secno>7 </span>Border parts</h2>

  <p>CSS borders traditionally cover an entire border edge. Sometimes,
   however, it can be useful to hide some parts of the border.

  <h3 id=the-border-parts-properties><span class=secno>7.1 </span>The
   &lsquo;<code class=property><a
   href="#border-parts0">border-parts</a></code>&rsquo; properties</h3>

  <table class=propdef>
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=border-parts0>border-parts</dfn>, <dfn
      id=border-parts-top>border-parts-top</dfn>, <dfn
      id=border-parts-right>border-parts-right</dfn>, <dfn
      id=border-parts-bottom>border-parts-bottom</dfn>, <dfn
      id=border-parts-left>border-parts-left</dfn>

    <tr>
     <td><em>Value:</em>

     <td>normal | [ &lt;length&gt; | &lt;percentage&gt; | &lt;fraction&gt; |
      repeat() ]+

    <tr>
     <td><em>Initial:</em>

     <td>normal

    <tr>
     <td><em>Applies to:</em>

     <td>all elements

    <tr>
     <td><em>Inherited:</em>

     <td>no

    <tr>
     <td><em>Percentages:</em>

     <td>refer to width of element <span class=issue>height for vertical
      borders?</span>

    <tr>
     <td><em>Media:</em>

     <td>visual

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>&lsquo;<code class=css>normal</code>&rsquo;, or a list consisting of
      absolute lengths, or percentages as specified
  </table>

  <p>These properties split their respective borders into parts along the
   border edge. The first part is visible, the second is invisible, the third
   part is visible, etc. Parts can be specified with lengths, percentages,
   fractions (expressed by the &lsquo;<code class=property>fr</code>&rsquo;
   unit, as per <a href="#CSS3GRID"
   rel=biblioentry>[CSS3GRID]<!--{{CSS3GRID}}--></a> or its <a
   href="http://dev.w3.org/csswg/css3-grid/">editor's edition</a>), and the
   &lsquo;<code class=css>repeat()</code>&rsquo; function. The &lsquo;<code
   class=property>normal</code>&rsquo; value means that the border is not
   split, but shown normally.

  <p>&lsquo;<code class=property><a
   href="#border-parts0">border-parts</a></code>&rsquo; is a shorthand
   property for the four individual properties.

  <p>If the listed parts are shorter than the border, any remaining border is
   split proportionally between the specified fractions. If there are no
   fractions, the behavior is as if &lsquo;<code class=css>1fr</code>&rsquo;
   had been specified at the end of the list.

  <p>If the listed parts are longer than the border, the specified parts will
   be shown in full until the end of the border. In this case, all fractions
   will be zero.

  <p>For horizontal borders, parts are listed from left to right. For
   vertical borders, parts are listed from top to bottom.

  <p>The &lsquo;<code class=css>repeat()</code>&rsquo; function specifies a
   "repeat pattern" that is repeated as many times as possible. Only one
   &lsquo;<code class=css>repeat()</code>&rsquo; function is allowed in a
   value. The repeat pattern must contain at least one length or percentage,
   otherwise the declaration must be ignored. The exact border parts are
   determined by laying out the specified border parts with all fractions
   initially set to zero. The border parts specified before and after the
   &lsquo;<code class=css>repeat()</code>&rsquo; function are laid out first.
   Thereafter, the repeat pattern is inserted between them at least once, and
   as many times as possible without making the sum of border parts longer
   than the border length. Any remaining border is split proportionally
   between the fractions specified.

  <p class=issue>The value of the repeat() function is disputed.

  <p>The exact border parts are determined by laying out the specified border
   parts with all fractions initially set to zero. Any remaining border is
   split proportionally between the fractions specified.

  <div class=example>
   <pre>
border-parts: 10px 1fr 10px;
</pre>

   <div style="position: relative; width: 250px; height: 150px; background:
    white;">
    <div style="border: 2px solid black; width: 200px; height: 100px;
     position: absolute; top: 20px; left: 20px">
     <div style="position: absolute; background: white; left: 15px; top:
      -5px; height: 110px; width: 170px"></div>

     <div style="position: absolute; background: white; left: -5px; top:
      15px; height: 70px; width: 210px"></div>
    </div>
   </div>
  </div>

  <div class=example>
   <pre>
border-parts-top: 10px 1fr 10px;
border-parts-bottom: 10px 1fr 10px;
border-parts-right: 5px 1fr 5px;
border-parts-left: 5px 1fr 5px;
</pre>

   <div style="position: relative; width: 250px; height: 150px; background:
    white;">
    <div style="border: 2px solid black; width: 200px; height: 100px;
     position: absolute; top: 20px; left: 20px">
     <div style="position: absolute; background: white; left: 15px; top:
      -5px; height: 110px; width: 170px"></div>

     <div style="position: absolute; background: white; left: -5px; top: 5px;
      height: 90px; width: 210px"></div>
    </div>
   </div>
  </div>

  <div class=example>
   <p>By making the first part have zero length, the inverse border of the
    previous example can easily be created:

   <pre>
border-parts-top: 0 10px 1fr 10px;
border-parts-bottom: 0 10px 1fr 10px;
border-parts-right: 0 5px 1fr 5px;
border-parts-left: 0 5px 1fr 5px;
</pre>

   <div style="position: relative; width: 250px; height: 150px; background:
    white;">
    <div style="border: 2px solid black; width: 200px; height: 100px;
     position: absolute; top: 20px; left: 20px">
     <div style="position: absolute; background: white; left: -5px; top:
      -5px; height: 10px; width: 15px"></div>

     <div style="position: absolute; background: white; right: -5px; top:
      -5px; height: 10px; width: 15px"></div>

     <div style="position: absolute; background: white; left: -5px; top:
      95px; height: 10px; width: 15px"></div>

     <div style="position: absolute; background: white; right: -5px; top:
      95px; height: 10px; width: 15px"></div>
    </div>
   </div>
  </div>

  <div class=example>
   <pre>
border: thin solid black;
border-parts: 0 1fr; /* hide borders */
border-parts-top: 10px 1fr 10px; /* make certain borders visible */
border-parts-bottom: 10px 1fr 10px;
</pre>

   <div style="position: relative; width: 250px; height: 150px; background:
    white;">
    <div style="border: 2px solid black; width: 200px; height: 100px;
     position: absolute; top: 20px; left: 20px">
     <div style="position: absolute; background: white; left: 15px; top:
      -5px; height: 110px; width: 170px"></div>

     <div style="position: absolute; background: white; left: -5px; top: 0px;
      height: 100px; width: 210px"></div>
    </div>
   </div>
  </div>

  <div class=example>
   <pre>
border-top: thin solid black;
border-bottom: thin solid black;
border-parts-top: 10px;
border-parts-bottom: 10px;
</pre>

   <div style="position: relative; width: 250px; height: 150px; background:
    white;">
    <div style="border: 2px solid black; width: 200px; height: 100px;
     position: absolute; top: 20px; left: 20px">
     <div style="position: absolute; background: white; left: 15px; top:
      -5px; height: 110px; width: 200px"></div>

     <div style="position: absolute; background: white; left: -5px; top: 0px;
      height: 100px; width: 210px"></div>
    </div>
   </div>
  </div>

  <div class=example>
   <pre>
border-top: thin solid black;
border-parts: 10px;
</pre>

   <div style="position: relative; width: 250px; height: 150px; background:
    white;">
    <div style="border: 2px solid black; width: 200px; height: 100px;
     position: absolute; top: 20px; left: 20px">
     <div style="position: absolute; background: white; left: 15px; top:
      -5px; height: 110px; width: 200px"></div>

     <div style="position: absolute; background: white; left: -5px; top: 0px;
      height: 110px; width: 210px"></div>
    </div>
   </div>
  </div>

  <div class=example>
   <p>This rendering:

   <div style="background: white; padding: 0.2em 0.5em">
    <pre style="margin-left: 0">
A sentence consists of words&#xB9;.
</pre>

    <div style="width: 3em; height: 2px; background: black"></div>

    <pre style="margin-left: 0">
&#xB9; Most often.
</pre>
   </div>
   can be achieved with this style sheet:
   <pre>
@footnote {
  border-top: thin solid black;
  border-parts: 4em;
}
</pre>
  </div>

  <div class=example>
   <pre>
border: 2px solid black;
border-top-parts: repeat(10px 10px);
</pre>

   <p>In this example, the repeat pattern is shown five times and there is,
    by coincidence, no remaining border.

   <div style="position: relative; width: 100px; background: white; padding:
    20px">
    <div style="border: 2px solid black; height: 40px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     2px; top: 20px; left: 30px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     2px; top: 20px; left: 50px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     2px; top: 20px; left: 70px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     2px; top: 20px; left: 90px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     2px; top: 20px; left: 110px"></div>
   </div>
  </div>

  <div class=example>
   <pre>
border: 2px solid black;
border-top-parts: repeat(10px 10px);
</pre>

   <p>In this example, the repeat pattern is shown five times. The box in
    this example is slightly wider than the box in the previous example. The
    remaining border is taken up by a fraction, as if this code had been
    specified:

   <pre>
border: 2px solid black;
border-top-parts: repeat(10px 10px) 1fr;
</pre>

   <div style="position: relative; width: 105px; background: white; padding:
    20px">
    <div style="border: 2px solid black; height: 40px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     2px; top: 20px; left: 30px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     2px; top: 20px; left: 50px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     2px; top: 20px; left: 70px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     2px; top: 20px; left: 90px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     2px; top: 20px; left: 110px"></div>

    <div style="position: absolute; background: red; width: 5px; height: 2px;
     top: 20px; left: 120px"></div>
   </div>

   <p>The fragment is shown in red for illustrative purposes; it should be
    shown in black by a compliant UA.
  </div>

  <div class=example>
   <pre>
border: 4px solid black;
border-top-parts: 40px 20px 0 1fr repeat(20px 20px) 0 1fr 40px;
</pre>

   <p>In this example, there will be a visible 40px border part on each end
    of the top border. Inside the 40px border parts, there will be an
    invisible border part of at least 20px. Inside these invisible border
    parts, there will be visible border parts, each 20px long with 20px
    invisible border parts between them.

   <div style="position: relative; width: 192px; background: white; padding:
    40px">
    <div style="border: 4px solid black; height: 40px"></div>

    <div style="position: absolute; background: white; width: 20px; height:
     4px; top: 40px; left: 80px"></div>

    <div style="position: absolute; background: red; width: 6px; height: 4px;
     top: 40px; left: 100px"></div>

    <div style="position: absolute; background: white; width: 20px; height:
     4px; top: 40px; left: 126px"></div>

    <div style="position: absolute; background: white; width: 20px; height:
     4px; top: 40px; left: 166px"></div>

    <div style="position: absolute; background: red; width: 6px; height: 4px;
     top: 40px; left: 186px"></div>
   </div>

   <p>The fragments are shown in red for illustrative purposes; they should
    not be visible in compliant UAs.
  </div>

  <div class=example>
   <pre>
border: 4px solid black;
border-top-parts: 40px 20px 0 1fr 20px 20px 0 1fr 40px;
</pre>

   <p>In this example, there will be a visible 40px border part on each end
    of the top border. Inside the 40px border parts, there will be an
    invisible border part of at least 20px. Inside these invisible border
    parts, there will be visible border parts, each 20px long with 20px
    invisible border parts between them.

   <div style="position: relative; width: 192px; background: white; padding:
    40px">
    <div style="border: 4px solid black; height: 40px"></div>

    <div style="position: absolute; background: white; width: 20px; height:
     4px; top: 40px; left: 80px"></div>

    <div style="position: absolute; background: red; width: 6px; height: 4px;
     top: 40px; left: 100px"></div>

    <div style="position: absolute; background: white; width: 20px; height:
     4px; top: 40px; left: 126px"></div>

    <div style="position: absolute; background: white; width: 20px; height:
     4px; top: 40px; left: 166px"></div>

    <div style="position: absolute; background: red; width: 6px; height: 4px;
     top: 40px; left: 186px"></div>
   </div>

   <p>The fragments are shown in red for illustrative purposes; they should
    not be visible in compliant UAs.
  </div>

  <div class=example>
   <pre>
border: 4px solid black;
border-parts-top: 3fr 10px 2fr 10px 1fr 10px 10px 10px 1fr 10px 2fr 10px 3fr;
</pre>

   <p>All but one of the visible border parts are represented as fractions in
    this example. The length of these border parts will change when the width
    of the element changes. Here is one rendering where 1fr ends up being
    10px:

   <div style="position: relative; width: 190px; background: white; padding:
    40px">
    <div style="border: 4px solid black; border-top: none; height: 40px"></div>

    <div style="position: absolute; background: red; width: 30px; height:
     4px; top: 40px; left: 40px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     4px; top: 40px; left: 70px"></div>

    <div style="position: absolute; background: red; width: 20px; height:
     4px; top: 40px; left: 80px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     4px; top: 40px; left: 100px"></div>

    <div style="position: absolute; background: red; width: 10px; height:
     4px; top: 40px; left: 110px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     4px; top: 40px; left: 120px"></div>

    <div style="position: absolute; background: black; width: 10px; height:
     4px; top: 40px; left: 130px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     4px; top: 40px; left: 140px"></div>

    <div style="position: absolute; background: red; width: 10px; height:
     4px; top: 40px; left: 150px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     4px; top: 40px; left: 160px"></div>

    <div style="position: absolute; background: red; width: 20px; height:
     4px; top: 40px; left: 170px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     4px; top: 40px; left: 190px"></div>

    <div style="position: absolute; background: red; width: 30px; height:
     4px; top: 40px; left: 200px"></div>
   </div>

   <p>Here is another rendering where 1fr ends up being 30px:

   <div style="position: relative; width: 440px; background: white; padding:
    40px">
    <div style="border: 4px solid black; border-top: none; height: 40px"></div>

    <div style="position: absolute; background: red; width: 90px; height:
     4px; top: 40px; left: 40px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     4px; top: 40px; left: 130px"></div>

    <div style="position: absolute; background: red; width: 60px; height:
     4px; top: 40px; left: 140px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     4px; top: 40px; left: 200px"></div>

    <div style="position: absolute; background: red; width: 30px; height:
     4px; top: 40px; left: 210px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     4px; top: 40px; left: 240px"></div>

    <div style="position: absolute; background: black; width: 10px; height:
     4px; top: 40px; left: 250px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     4px; top: 40px; left: 260px"></div>

    <div style="position: absolute; background: red; width: 30px; height:
     4px; top: 40px; left: 270px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     4px; top: 40px; left: 300px"></div>

    <div style="position: absolute; background: red; width: 60px; height:
     4px; top: 40px; left: 310px"></div>

    <div style="position: absolute; background: white; width: 10px; height:
     4px; top: 40px; left: 370px"></div>

    <div style="position: absolute; background: red; width: 90px; height:
     4px; top: 40px; left: 390px"></div>
   </div>

   <p>The fragments are shown in red for illustrative purposes; they should
    be black in compliant UAs.
  </div>
  <!--

<div class="example">

<p>Consider this code:

<pre>
border-parts-top: 10px 5px repeat(5px 5px) 10px;
<pre>

<p>If top border of an element is 44px long, the parts will be as follows: 

<table>
<tr><td>specified<td>absolute<td>visible?
<tr><td>10px<td>10px<td>yes
<tr><td>1fr<td>2px<td>no
<tr><td>5px<td>5px<td>yes
<tr><td>5px<td>5px<td>no
<tr><td>0<td>0px<td>no
<tr><td>1fr<td>2px<td>no
<tr><td>10px<td>10px<td>yes
</table>

</div>

-->

  <div class=out>
   <h2 id=pulling-elements-the-target-pull-value><span class=secno>8
    </span>Pulling elements: the ''target-pull()'' value</h2>

   <p>In order to move an element from one place in the presentation to
    another, the ''target-pull()'' value is introduced on the 'content'
    property. The value uses a functional notation and takes a URI value as
    argument. In combination with the 'content' property, target elements can
    be pulled to the anchor element. The content of the anchor element is
    lost. The target element is only moved in the presentation of the
    document and not in the structure of the document.

   <div class=example>
    <p>Consider this code:

    <pre>
&lt;style>
@media print {
  .footnote { 
     float: footnote; 
     content: target-pull(attr(href, url)) }
  .footnote::footnote-call { content: counter(footnote, super-decimal) }
  .footnote::footnote-marker { content: counter(footnote, super-decimal) }
  .marker { display: none }
}
&lt;/style>
...
&lt;p>A sentence consists of words&lt;a class="footnote" href="#words"> [3]&lt;/a>.&lt;/p>
...
&lt;p id="words">&lt;span class="marker">[3]&lt;/span> Most often.&lt;/p>
</pre>

    <p>As a result of the &lsquo;<code class=css>target-pull()</code>&rsquo;
     value, the last <code>p</code> element is moved from its normal place of
     presentation and into the footnote.
   </div>

   <h2 id=pushing-elements-named-flows><span class=secno>9 </span>Pushing
    elements: named flows</h2>

   <p>Footnotes and running elements are print-specific conventions that move
    content from one place to another in the presentation of a document. In
    this section, a generic mechanism for moving content is described:
    <em>named flows</em> make it possible to push elements from one place in
    the presentation to another. Different from footnotes, named flows are
    not counted by default. Also, while UAs are allowed to employ certain
    heuristics when formatting footnotes, this is not the case for named
    flows.

   <p>Named flows introduce two new values:

   <ol>
    <li>On the &lsquo;<code class=property>float</code>&rsquo; property,
     &lsquo;<code class=css>to()</code>&rsquo; is introduced to indicate that
     the element should be pushed from its natural position in the
     presentation and into a named flow.

    <li>On the &lsquo;<code class=property>content</code>&rsquo; property,
     &lsquo;<code class=css>from()</code>&rsquo; is introduced to indicate
     that a named flow should be emptied and that the emptied elements should
     become the content of the element. The &lsquo;<code
     class=css>from()</code>&rsquo; value cannot be combined with any other
     values.
   </ol>

   <p>Elements that are moved into a new flow are removed from their current
    position to where &lsquo;<code class=css>from()</code>&rsquo; has been
    set. Elements that are moved into a named flow are only displayed once.

   <div class=example>
    <p>Named flows can be used to create endnotes:

    <pre>
.note { 
  float: to(endnote);
}
div.chapter::after { content: from(endnote) }
</pre>
   </div>

   <div class=example>
    <p>Consider this markup:

    <pre>
&lt;contrib contrib-type="author">
  &lt;name>
    &lt;surname>Knuth&lt;/surname>
    &lt;given-names>Donald E.&lt;/given-names>
  &lt;/name>
  &lt;role>professor&lt;/role>
&lt;/contrib>
</pre>

    <p>combined with this style sheet:

    <pre>
surname { float: to(lastname) }
given-names::after { content: from(lastname) }
role::before { content: ", " }
</pre>
    will result in this presentation:
    <pre>
Donald E. Knuth, professor
</pre>
   </div>

   <p>Just like footnotes, elements in named flows can have <em>call</em> and
    <em>marker</em> pseudo-elements. However, these pseudo-elements are not
    shown by default.

   <div class=example>
    <p>Notes inside tables can be moved to after the table by way of a named
     flow.

    <pre>
table .note { float: to(tablenote); counter-increment: tablenotes }
table .note::note-marker { content: counter(tablenotes, super-decimal) }
table .note::note-call { content: counter(tablenotes, super-decimal) }
table::after { content: from(tablenote) }
</pre>

    <p class=issue>How does one remove identical table notes?
   </div>

   <p>If a named flow isn't emptied, its content is lost.

   <div class=example>
    <p>Consider this code:

    <pre>
.remove { to(dev-null) }
</pre>

    <p>If there is no corresponding &lsquo;<code
     class=css>from(dev-null)</code>&rsquo; value, elements with class names
     "remove" are not displayed. The effect is identical to this code:

    <pre>
.remove { display: none }
</pre>
   </div>

   <div class=example>
    <p>Named flows can be used to create sidenotes. In this example, notes
     are floated into margin boxes in the outside margins:

    <pre>
.note { 
  float: to(sidenote);
}
@page :left {
  @left-bottom {
    content: from(sidenote);
  }
}
@page :right {
  @right-bottom {
    content: from(sidenote);
  }
}
</pre>
   </div>
  </div>

  <h2 id=hyphenation><span class=secno>10 </span>Hyphenation</h2>
  <!--
<table class=hyphenate>
<tr><th>CSS<th>XSL<th>DSSSL
<tr><th>hyphens<th>hyphenate<th>hyphenate

<tr><td>none<td>false
<tr><td>manual<td>
<tr><td>auto<td>true

<tr><th>hyphenate-resource<th>country, language, script<th>?
<tr><td>auto
<tr><td>&lt;uri>

<tr><th>hyphenate-before<th>hyphenation-remain-character-count<th>hyphenation-remain-char-count
<tr><td>auto<td>
<tr><td>&lt;integer><td>&lt;integer>

<tr><th>hyphenate-after<th>hyphenation-push-character-count<th>hyphenation-push-char-count
<tr><td>auto<td>
<tr><td>&lt;integer><td>&lt;integer>

<tr><th>hyphenate-lines<th>hyphenation-ladder-count<th>hyphenation-ladder-count
<tr><td>no-limit<td>no-limit
<tr><td>&lt;integer>

<tr><th>hyphenate-character<th>hyphenation-character<th>hyphenation-char
<tr><td>&lt;string><td>&lt;character>
<tr><td>auto

<tr><th><th>hyphenation-keep<th>hyphenation-keep
<tr><td><td>auto
<tr><td><td>column
<tr><td><td>page
<tr><th><th><th>hyphenation-exceptions
<tr><td><td><td>The value is a list of strings. Each string is a word which may contain hyphen characters, #\-, indicating where hyphenation may occur. If a word to be hyphenated occurs in the list, it may only be hyphenated in the specified places. The initial value is the empty list.


</table>

-->

  <h3 id=hyphenate-properties><span class=secno>10.1 </span>Hyphenate
   properties</h3>

  <p>This specification defines six new properties to describe hyphenation.

  <table class=propdef>
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=hyphens>hyphens</dfn>

    <tr>
     <td><em>Value:</em>

     <td>none | manual | auto

    <tr>
     <td><em>Initial:</em>

     <td>manual

    <tr>
     <td><em>Applies to:</em>

     <td>all elements

    <tr>
     <td><em>Inherited:</em>

     <td>yes

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Media:</em>

     <td>visual

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>specified value
  </table>

  <p>Values are:

  <dl>
   <dt>none

   <dd>Words are not broken at line breaks, even if characters inside the
    word suggest line break points.

   <dt>manual

   <dd>Words are only broken at line breaks where there are characters inside
    the word that suggest line break opportunities. Characters can be
    explicit or conditional.
    <div class=example>
     <p>In Unicode, U+00AD is a conditional "soft hyphen" and U+2010 is an
      explicit hyphen. Unicode Standard Annex #14 describes the <a
      href="http://unicode.org/reports/tr14/#SoftHyphen">role of soft hyphens
      in the</a> Unicode Line breaking algorithm.
    </div>

    <div class=example>
     <p>In HTML, &amp;shy; represents the soft hyphen character which
      suggests a line break opportunity.

     <pre>
ex&amp;shy;ample.
</pre>
    </div>

   <dt>auto

   <dd>Words can be broken at appropriate hyphenation points, as determined
    by characters inside the word, resources listed in &lsquo;<code
    class=property><a
    href="#hyphenate-resource">hyphenate-resource</a></code>&rsquo;, or other
    UA-dependent resources. Characters inside the word take priority over
    hyphenation points determined by other resources.
  </dl>

  <table class=propdef>
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=hyphenate-resource>hyphenate-resource</dfn>

    <tr>
     <td><em>Value:</em>

     <td>none | &lt;uri&gt; [, &lt;uri&gt; ]*

    <tr>
     <td><em>Initial:</em>

     <td>none

    <tr>
     <td><em>Applies to:</em>

     <td>all elements

    <tr>
     <td><em>Inherited:</em>

     <td>yes

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Media:</em>

     <td>visual

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>specified value
  </table>

  <p>This property specifies a comma-separated list of external resources
   that can help the UA determine hyphenation points. If more than one
   resource is specified, the UA should consult each resource until it finds
   one that is able to determine hyphenation points in a word. The
   &lsquo;<code class=property>none</code>&rsquo; value indicates that no
   external resources are available. In any case, the UA can also use local
   resources not listed on this property.

  <div class=example>
   <p>Often, finding the right hyphenate resource is based on knowing the
    language of the text. The <code>lang</code> attribute is recommended for
    encoding the language, and the corresponding selector is used in this
    example:

   <pre>
:lang(dk) { hyphenate-resource: url("hyph_da_DK.dic"), url("hyph_da_NO.dic") }
</pre>
  </div>

  <table class=propdef>
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=hyphenate-before>hyphenate-before</dfn>

    <tr>
     <td><em>Value:</em>

     <td>&lt;integer> | auto

    <tr>
     <td><em>Initial:</em>

     <td>auto

    <tr>
     <td><em>Applies to:</em>

     <td>all elements

    <tr>
     <td><em>Inherited:</em>

     <td>yes

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Media:</em>

     <td>visual

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>specified value
  </table>

  <p>This property specifies the minimum number of characters in a hyphenated
   word before the hyphenation character. The &lsquo;<code
   class=css>auto</code>&rsquo; value means that the UA chooses a value that
   adapts to the current layout.

  <p class=note>Unless the UA is able to calculate a better value, it is
   suggested that &lsquo;<code class=css>auto</code>&rsquo; means 2.

  <table class=propdef>
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=hyphenate-after>hyphenate-after</dfn>

    <tr>
     <td><em>Value:</em>

     <td>&lt;integer> | auto

    <tr>
     <td><em>Initial:</em>

     <td>auto

    <tr>
     <td><em>Applies to:</em>

     <td>all elements

    <tr>
     <td><em>Inherited:</em>

     <td>yes

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Media:</em>

     <td>visual

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>specified value
  </table>

  <p>This property specifies the minimum number of characters in a hyphenated
   word after the hyphenation character. The &lsquo;<code
   class=css>auto</code>&rsquo; value means that the UA chooses a value that
   adapts to the current layout.

  <p class=note>Unless the UA is able to calculate a better value, it is
   suggested that &lsquo;<code class=css>auto</code>&rsquo; means 2.

  <table class=propdef>
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=hyphenate-lines>hyphenate-lines</dfn>

    <tr>
     <td><em>Value:</em>

     <td>no-limit | &lt;integer>

    <tr>
     <td><em>Initial:</em>

     <td>no-limit

    <tr>
     <td><em>Applies to:</em>

     <td>all elements

    <tr>
     <td><em>Inherited:</em>

     <td>yes

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Media:</em>

     <td>visual

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>specified value
  </table>

  <p>This property indicates the maximum number of successive hyphenated
   lines in an element. In some cases, user agents may not be able to honor
   the specified value. The &lsquo;<code class=css>no-limit</code>&rsquo;
   value means that there is no limit.

  <table class=propdef>
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=hyphenate-character>hyphenate-character</dfn>

    <tr>
     <td><em>Value:</em>

     <td>auto | &lt;string>

    <tr>
     <td><em>Initial:</em>

     <td>auto

    <tr>
     <td><em>Applies to:</em>

     <td>all elements

    <tr>
     <td><em>Inherited:</em>

     <td>yes

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Media:</em>

     <td>visual

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>specified value
  </table>

  <p>This property specifies a string that is shown when a hyphenate-break
   occurs. The &lsquo;<code class=property>auto</code>&rsquo; value means
   that the User Agent should find an appropriate value. <!--
<p class=issue>Which character is it, "minus hyphen" or U+2010?
-->
   

  <div class=example>
   <p>In Latin scripts, the hyphen character (U+2010) is often used to
    indicate that a word has been split. Normally, it will not be necessary
    to set it explicitly. However, this can easily be done:

   <pre>
article { hyphenate-character: "\2010" }
</pre>
  </div>
  <!--
<p class=issue>XSL uses a different list of <a href="http://www.w3.org/TR/2006/CR-xsl11-20060220/#common-hyphenation-properties">properties</a>. Reuse of these properties has been considered.
-->
  <!--
<h2>New counter styles</h2>

<h3>The &lsquo;<code class=css>super-decimal</code>&rsquo; list-style-type</h3>

<p>A new list-style-type, &lsquo;<code class=css>super-decimal</code>&rsquo;, is introduced to better support
footnotes. Small, super-script footnote calls are common; the first
three numbers have code points in Latin-1 and some font families have
even more super-script glyphs. The &lsquo;<code class=css>super-decimal</code>&rsquo; keyword allow
these font resources to be used and replaces the use of &lsquo;<code class=property>font-size</code>&rsquo;
and &lsquo;<code class=property>vertical-align</code>&rsquo; (which prohibit the use of special-purpose
glyphs).

<div class="example">
This example specifies that footnote markers should consist of
super-script decimal numbers.

<pre>
::footnote-marker { content: counter(footnote, super-decimal) }
</pre>
</div>

<p>Using super-script glyphs is optional; UAs may also scale and position
other glyphs for use in footnote calls.

<p class=issue>There are three things this could mean: (a) this implies the use of a font feature if the font has that feature (b) this implies that the counter is translated into the unicode characters (c) the issue of accessing font features should be 
-->

  <h3 id=named-counter-styles><span class=secno>10.2 </span>Named counter
   styles</h3>

  <p>CSS defines a number of predefined list style types for the &lsquo;<code
   class=property>list-style-type</code>&rsquo; property and other places
   where a list-style-type value is accepted. Some styles repeat the same
   glyph (e.g., &lsquo;<code class=css>disc</code>&rsquo; and &lsquo;<code
   class=css>circle</code>&rsquo;) while others have lists of glyphs (e.g.,
   &lsquo;<code class=css>decimal</code>&rsquo;, and &lsquo;<code
   class=css>lower-roman</code>&rsquo;). To increase the range of lists that
   can be achieved through CSS without adding many new keywords,
   @counter-style rules are introduced. By using @counter-style, a style
   sheet can name new counter styles.

  <p>An @counter-style rule consists of the keyword &lsquo;<code
   class=css>@counter-style</code>&rsquo;, followed by the name of the symbol
   counter style, followed by a space-separated list of strings.

  <div class=example>
   <pre>
@counter-style daggers "*" "\2020" "\2021" "\A7" "#";
ol { list-style-type: daggers }
</pre>
  </div>

  <div class=example>
   <pre>
@counter-style ordinal "1st" "2nd" "3rd" "4th";
h1:before { content: counter(chapter, ordinal) " chapter" }
</pre>
  </div>

  <p>The first string in the list represents number one, the second string
   represents number two, etc. Outside the range of specified values, the
   rendering will be as if the &lsquo;<code class=css>decimal</code>&rsquo;
   list style type had been specified.

  <div class=example>
   <p>Consider this example:

   <pre>
@counter-style ordinal "1st" "2nd" "3rd" "4th";
ordered-list { counter-reset: items -1 }
list-item { counter-increment: items 2 }
</pre>

   <p>For a series of <tt>list-item</tt> elements inside an
    <tt>ordered-list</tt> element, the value of the <tt>items</tt> counter
    will be -1, 1, 3, 5, 7 etc. Given that the <tt>ordinal</tt> counter style
    only defines a counter style for 1, 2, 3, and 4, the list will be
    numbered "-1", "1st", "3rd", "5", "7" etc.
  </div>

  <p>Named counter styles can be imported through @import statements.

  <div class=example>
   <pre>
@import url(http://www.example.com/armenian-counters.css); /* defines 'armenian' */
ol { list-style-type: armenian }
</pre>
  </div>
  <!--
<div class="issue">Should we allow images in addition to strings? 
<pre>
  @counter-style graphic url("1.gif") url("2.gif") url("3.gif")
</pre>
</div>
-->

  <h3 id=the-symbols-list-style-type><span class=secno>10.3 </span>The
   &lsquo;<code class=css>symbols()</code>&rsquo; list-style-type</h3>

  <p>A new list-style-type with a functional notation is introduced to avoid
   the indirection of having to name counter styles. The &lsquo;<code
   class=css>symbols()</code>&rsquo; value takes a comma-separated list of
   strings as arguments.

  <div class=example>
   <pre>
::footnote-call {
    content: counter(footnote, symbols('*', '+', '!'))
}
</pre>
  </div>

  <p>Outside the range of specified values, the rendering will be as if the
   &lsquo;<code class=css>decimal</code>&rsquo; list style type had been
   specified.

  <div class=example> This code:
   <pre>
ol { list-style: symbols("*", "\2020", "\2021", "\A7", "#") }
</pre>
   will result in these list-items markers: * &#x2020; &#x2021; &#xA7; # 6 7
   8 ...</div>
  <!--
<p class="issue">Should there be a way to indicate the behavior if there are more items than strings? Proposals include: "alphabetic", "enumerate", "numeric", "cycle", "ideographic".
-->
  <!--
<h2>Page counters</h2>

<p>Printed publications often show page numbers to indicate the
sequence of pages. Also, it is common to show the total number of
pages in the document. For example, "page 3 of 5" may be shown at the
bottom of a page.

<p>This specification describes two counters that can be used to
indicate page numbers: &lsquo;<code class=css>page</code>&rsquo; and &lsquo;<code class=css>pages</code>&rsquo;.

<h3>The &lsquo;<code class=css>page</code>&rsquo; counter</h3>

<p>The &lsquo;<code class=css>page</code>&rsquo; counter is predefined to start with a value of zero,
and to be automatically incremented by one before every page. That is,
UAs must behave as if this code fragment is part of the default style
sheet:

<pre>
@page {
  counter-increment: page 1;
}
</pre>

<p>The &lsquo;<code class=css>page</code>&rsquo; counter can be reset and incremented in style sheets
just like other counters. On pages where the counter is incremented by
the style sheet in the page context, the automatic incrementation does
not take place.

<div class="example">

<pre>
@page {
  @bottom-center {
     content: counter(page);
  }
}

@page introduction {
  counter-reset: page;
}

@page :right {
  counter-increment: page 2;
}
</pre>
</div>


<h3>The &lsquo;<code class=css>pages</code>&rsquo; counter</h3>

<p>The &lsquo;<code class=css>pages</code>&rsquo; counter is predefined to have the total number of
pages in the document. In order to find the value of this counter, the
UA will have to paginate the document. This counter is a constant and
it cannot be set or incremented by a style sheet.

<div class=example>
<pre>
@page {
  @bottom-center {
     content: "Page " counter(page) " of " counter(pages) " pages in total";
  }
}
</pre>
</div>

<p>UAs that are not able to paginate the document should display a
question mark or another symbol that indicates uncertainty.

<div class=example>

<p>This code has no effect on the &lsquo;<code class=css>pages</code>&rsquo; counter which cannot be
changed by the style sheet. However, the &lsquo;<code class=css>page</code>&rsquo; counter reset normally.

<pre>
@page :right {
  counter-reset: pages page;
}
</pre>
</div>

-->

  <div class=out>
   <h2 id=character-substitution><span class=secno>11 </span>Character
    substitution</h2>

   <p>It is sometimes convenient to replace one character with another
    without changing the source document. For example, the apostrophe
    character is easily found on keyboards, but in print it is often better
    to replace it with a quotation character. The &lsquo;<code
    class=property><a href="#text-replace">text-replace</a></code>&rsquo;
    property offers a way to perform the replacement in the style sheet.

   <p>This property only applies to batch processors. <!--
<p class='issue'>It this something CSS should do? Some think it's OK to use CSS for non-stylistic purposes, some think this <em>is</em> is a stylistic purpose, and some think this is not stylistic and should therefore be kept outside of CSS.
-->
    

   <h3 id=the-text-replace-property><span class=secno>11.1 </span>The
    &lsquo;<code class=property><a
    href="#text-replace">text-replace</a></code>&rsquo; property</h3>

   <table class=propdef>
    <tbody>
     <tr>
      <td><em>Name:</em>

      <td><dfn id=text-replace>text-replace</dfn>

     <tr>
      <td><em>Value:</em>

      <td> [&lt;string> &lt;string>]+ | none

     <tr>
      <td><em>Initial:</em>

      <td>none

     <tr>
      <td><em>Applies to:</em>

      <td>all elements

     <tr>
      <td><em>Inherited:</em>

      <td>yes <span class=issue>or?</span>

     <tr>
      <td><em>Percentages:</em>

      <td>N/A

     <tr>
      <td><em>Media:</em>

      <td>visual

     <tr>
      <td><em>Computed&nbsp;value:</em>

      <td>as specified value
   </table>

   <p>This property is used to replace all occurrences of a certain string
    with another string in the content of the element. The property accepts
    pairs of strings as value, in addition to the initial &lsquo;<code
    class=css>none</code>&rsquo; value. For each pair of strings, occurrences
    of the first string in the content will be replaced with the second
    string. If &lsquo;<code class=css>none</code>&rsquo; is specified, no
    replacements will occur.

   <div class=example>
    <p>In this example, the apostrophe character is converted to a quotation
     character.

    <pre>
body { text-replace: "'" "\2019" }
</pre>
   </div>

   <div class=example>
    <p>In this example, the string "--" is replaced with the em-dash
     character:

    <pre>
body { text-replace: "--" "\2014" }
</pre>
   </div>

   <div class=example>
    <p>In this example, the string "..." is replaced with the ellipsis
     character:

    <pre>
body { text-replace: "..." "\2026" }
</pre>
   </div>

   <div class=example>
    <p>In this example, all references to &lsquo;<code class=css>Soviet
     Union</code>&rsquo; are replaced with &lsquo;<code
     class=property>Russia</code>&rsquo;.

    <pre>
body { text-replace: "Soviet Union" "Russia" }
</pre>
   </div>

   <p>Text replacements are applied sequentially.

   <div class=example>
    <p>The two rules below yield the same result. In the first rule all
     &lsquo;<code class=property>a</code>&rsquo; characters are converted to
     &lsquo;<code class=property>b</code>&rsquo;. Subsequently, all
     &lsquo;<code class=property>b</code>&rsquo; characters are converted to
     &lsquo;<code class=property>c</code>&rsquo;. In the second rule, all
     &lsquo;<code class=property>a</code>&rsquo; and &lsquo;<code
     class=property>b</code>&rsquo; characters are converted directly to
     &lsquo;<code class=property>c</code>&rsquo;.

    <pre>
body { text-replace: "a" "b" "b" "c" }
body { text-replace: "a" "c" "b" "c" }
</pre>
   </div>

   <p>If text replacements are specified on two elements that have an
    ancestor-descender relationship, only the setting on the youngest element
    is applied.

   <div class=example>
    <p>In this example, only the second declaration has any effect on text
     inside the body element.

    <pre>
html { text-replace: "a" "b" }
body { text-replace: "c" "d" }
</pre>
   </div>

   <p>The first string in a pair must have at least one character, while the
    second may be empty.

   <div class=example>
    <p>In this example, all &lsquo;<code class=property>a</code>&rsquo;
     characters are removed.

    <pre>
body { text-replace: "a" "" }
</pre>
   </div>

   <p>If the first string of a pair is empty, or if an odd number of strings
    has been specified, the whole value is ignored and no text replacements
    are performed.

   <p>This property is evaluated after the &lsquo;<code
    class=property>content</code>&rsquo; property, and before &lsquo;<code
    class=property>text-transform</code>&rsquo;.

   <p>This property is applied after the &lsquo;<code
    class=property>white-space</code>&rsquo; property.

   <div class=example>
    <p>Consider this CSS code:

    <pre>
p { text-replace: "Soviet Union" "Russia"; }
</pre>

    <p>Text replacements would occur in both these paragraphs:

    <pre>
&lt;p>Hello Soviet Union!&lt;/p>
&lt;p>Hello Soviet
Union!&lt;/p>
</pre>
   </div>

   <div class=example>
    <p>Consider this CSS code:

    <pre>
p { 
  text-replace: "Soviet Union" "Russia"; 
  white-space: pre;
}
</pre>

    <p>Due to the preservation of white space, a text replacement would only
     occur in the first of these paragraphs:

    <pre>
&lt;p>Hello Soviet Union!&lt;/p>
&lt;p>Hello Soviet
Union!&lt;/p>
</pre>
   </div>

   <p class=note>This property is very powerful and must be used with great
    care. The purpose of this property is to beautify the presentation of
    text when changing the source document is impractical.

   <div class=issue>
    <p>One weakness is that it is not able to perform a the commonly
     requested task of replacing pairs of double quotes with proper quote
     marks. One way of addressing this would be to add support for regular
     expressions. For example:

    <div class=example>
     <pre class=issue>
body { text-replace: 's/"([^"]*?)"/&#xAB;$1&#xBB;/g' }
</pre>
    </div>
    <!-- "-->
    <p>Another option is to allow uneven number of strings in the value:

    <pre class=issue>
body { text-replace: '"' '&laquo;' '&raquo;' }
</pre>

    <p>In the example above, the first double quote (") would be replace by
     "&laquo;", the second would be replaced by "&raquo;" etc. In order for
     this to work, commas would have to be introduced in order to distinguish
     between the different sets of replacements:

    <pre>
body { text-replace: "Soviet Union" "Russia", '"' '&laquo;' '&raquo;' }
</pre>
    <!-- "-->
    <p>Another approach is to select the text to be replaced in the selector:
     

    <pre>
*::text("Soviet Union") { content: "Russia" }
</pre>
   </div>
  </div>

  <h2 id=image-resolution><span class=secno>12 </span>Image resolution</h2>

  <p>Image resolution, as the term is used in this document, means pixels per
   physical length, e.g., pixels per inch. Some image formats can record
   information about the resolution of images. This information can be
   helpful when determining the actual size of the image in the formatting
   process. However, the information can also be wrong, in which case it
   should be ignored. The &lsquo;<code class=property><a
   href="#image-resolution0">image-resolution</a></code>&rsquo; property is
   introduced to determine the correct resolution of images.

  <table class=propdef>
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=image-resolution0>image-resolution</dfn>

    <tr>
     <td><em>Value:</em>

     <td>normal | [ from-image || &lt;dpi> ]

    <tr>
     <td><em>Initial:</em>

     <td>normal

    <tr>
     <td><em>Applies to:</em>

     <td>replaced elements and background images

    <tr>
     <td><em>Inherited:</em>

     <td>yes

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Media:</em>

     <td>visual

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>a &lt;dpi> value
  </table>

  <p>This property accepts either a single value, or a comma-separated list
   of two values. The values are:

  <dl>
   <dt>normal

   <dd>The resolution of the image is unknown, and UAs must not use the
    resolution found in the image. Instead, the image resolution will be
    found by making image pixels equivalent to CSS pixels.

   <dt>from-image

   <dd>The UA must look for the resolution in the image itself.

   <dt>&lt;dpi>

   <dd>The value consists of a number with a &lsquo;<code
    class=property>dpi</code>&rsquo; unit identifier. The UA must use the
    specified resolution.
  </dl>

  <p>If the &lsquo;<code class=property>from-image</code>&rsquo; keyword is
   combined with a dpi value, the resolution of the image is used if it can
   be found. Otherwise, the specified resolution is used.

  <div class=example>
   <p>This rule specifies that the UA should use the image resolution found
    in the image itself.

   <pre>
img { image-resolution: from-image }
</pre>
  </div>

  <div class=example>
   <p>These rules both specify that the UA should use the image resolution
    found in the image itself. If the image has no resolution, the resolution
    is set to 300dpi.

   <pre>
img { image-resolution: from-image 300dpi }
img { image-resolution: 300dpi from-image }
</pre>
  </div>

  <div class=example>
   <p>Using this rule, the image resolution is set to 300dpi and the
    resolution in the image, if any, is ignored.

   <pre>
img { image-resolution: 300dpi }
</pre>
  </div>
  <!--

<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>image-resolution</dfn>
    <tr>
      <td><em>Value:</em>
    <td>normal | auto | &lt;dpi> [ , normal | &lt;dpi> ]?
    <tr>
      <td><em>Initial:</em>
      <td>normal
    <tr>
      <td><em>Applies to:</em>
      <td>replaced elements
    <tr>
      <td><em>Inherited:</em>
      <td>yes
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>visual
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>as specified value <span class=issue>(or, should it be only one value?)</span>
</table>

<p>This property accepts either a single value, or a comma-separated
list of two values. The values are:

<dl>
<dt>normal

<dd>The resolution of the image is unknown, and UAs should not use the
resolution found in the image. Instead, the image resolution will be
found by making image pixels equivalent to CSS pixels.

<dt>auto

<dd>The UA must look for the resolution in the image itself. If the image has no image resolution, the next value in the comma-separated list is evaluated. 

<dt>&lt;dpi>

<dd>The value consists of a number with a &lsquo;<code class=property>dpi</code>&rsquo; unit identifier. The
UA should use the specified resolution.

</dl>

<p>If, after evaluating the specified values, no image resolution has been determined, the UA should behave as if &lsquo;<code class=css>normal</code>&rsquo; had been specified.

<div class="example">
<p>This rule specifies that the UA should use the image resolution found in the image itself.
<pre>
img { image-resolution: auto }
</pre>
</div>

<div class="example">
<p>This rule specifies that the UA should use the image resolution found in the image itself. If the image has no resolution, the resolution is set to 300dpi.
<pre>
img { image-resolution: auto, 300dpi }
</pre>
</div>

<div class="example">
<p>Using this rule, the image resolution is set to 300dpi and the resolution in the image, if any, is ignored. 
<pre>
img { image-resolution: 300dpi }
</pre>
</div>


-->
  <!--

<div class="issue">
<p>Should there be a way of setting width, height, resolution on images that are referenced by a URL in the style sheet? E.g., 
<pre>
background-image: url(image.png, width, height, resolution);
background-image: image-url(image.png, width, height, resolution);
background-image: image(url(image.png), width, height, resolution);
</pre>
</div>



<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>background-image-resolution</dfn>
    <tr>
      <td><em>Value:</em>
    <td>normal | auto | &lt;dpi> [ , normal | &lt;dpi> ]?
    <tr>
      <td><em>Initial:</em>
      <td>normal
    <tr>
      <td><em>Applies to:</em>
      <td>replaced elements
    <tr>
      <td><em>Inherited:</em>
      <td>yes
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>visual
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>as specified value <span class=issue>(or, should it be only one value?)</span>
</table>

<p class=issue>Introducing one new property in all places where an image can be loaded may not be a scalable solution. Therefore this property is at risk.

<p>As &lsquo;<code class=property>image-resolution</code>&rsquo;, except that it describes the resolution of the element's background image. 

-->

  <h2 id=page-marks-and-bleed-area><span class=secno>13 </span>Page marks and
   bleed area</h2>

  <p>The &lsquo;<code class=property><a href="#marks">marks</a></code>&rsquo;
   property from <a href="#CSS2" rel=biblioentry>[CSS2]<!--{{CSS2}}--></a> is
   part of this specification.

  <table class=propdef>
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=marks>marks</dfn>

    <tr>
     <td><em>Value:</em>

     <td>[ crop || cross ] | none

    <tr>
     <td><em>Initial:</em>

     <td>none

    <tr>
     <td><em>Applies to:</em>

     <td>page context

    <tr>
     <td><em>Inherited:</em>

     <td>no

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Media:</em>

     <td>visual, paged

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>specified value
  </table>

  <p>This property adds crop and/or cross marks to the document. Crop marks
   indicate where the page should be cut. Cross marks are used to align
   sheets.

  <p>Crop marks and cross marks are printed outside the page box. To have
   room to show crop and cross marks, the final pages will have to be
   somewhat bigger than the page box.

  <div class=example>
   <p>To set crop and cross marks on a document, this code can be used:

   <pre>
@page { marks: crop cross }
</pre>
  </div>

  <table class=propdef>
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=bleed>bleed</dfn>

    <tr>
     <td><em>Value:</em>

     <td>&lt;length&gt;

    <tr>
     <td><em>Initial:</em>

     <td>6pt

    <tr>
     <td><em>Applies to:</em>

     <td>page context

    <tr>
     <td><em>Inherited:</em>

     <td>no

    <tr>
     <td><em>Percentages:</em>

     <td>refer to width of page box

    <tr>
     <td><em>Media:</em>

     <td>visual

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>as specified value
  </table>

  <p>This property specifies the extent of the page bleed area outside the
   page box. This property only has effect if crop marks are enabled.

  <h2 id=bookmarks><span class=secno>14 </span>Bookmarks</h2>

  <p>Some document formats have the capability of holding bookmarks.
   Bookmarks are typically shown outside the document itself, often a
   tree-structured and clickable table of contents to help navigate in the
   electronic version of the document. To generate bookmarks, these
   properties are defined:

  <table class=propdef>
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=bookmark-level>bookmark-level</dfn>

    <tr>
     <td><em>Value:</em>

     <td>none | &lt;integer>

    <tr>
     <td><em>Initial:</em>

     <td>none

    <tr>
     <td><em>Applies to:</em>

     <td>all elements

    <tr>
     <td><em>Inherited:</em>

     <td>no

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Media:</em>

     <td>all

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>specified value
  </table>

  <p>This property describes what level a certain bookmark has in a
   hierarchical bookmark structure. The highest level is &lsquo;<code
   class=css>1</code>&rsquo;, then &lsquo;<code class=css>2</code>&rsquo;,
   &lsquo;<code class=css>3</code>&rsquo; etc.

  <div class=example>
   <pre>
h1 { bookmark-level: 1 }
h2 { bookmark-level: 2 }
h3 { bookmark-level: 3 }
</pre>
  </div>

  <table class=propdef>
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=bookmark-label>bookmark-label</dfn>

    <tr>
     <td><em>Value:</em>

     <td>content() | attr() | &lt;string>

    <tr>
     <td><em>Initial:</em>

     <td>content()

    <tr>
     <td><em>Applies to:</em>

     <td>all elements

    <tr>
     <td><em>Inherited:</em>

     <td>no

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Media:</em>

     <td>all

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>specified value
  </table>

  <p>This property specifies the label of the bookmark, i.e., the text that
   will represent the bookmark in the bookmark structure.

  <div class=example>
   <pre>
a { bookmark-label: attr(title, string) }
h1 { bookmark-label: content() }
h2 { bookmark-label: content(before) }
#frog { bookmark-label: "The green frog" }
</pre>
  </div>

  <table class=propdef>
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=bookmark-target>bookmark-target</dfn>

    <tr>
     <td><em>Value:</em>

     <td>none | &lt;uri> | &lt;attr>

    <tr>
     <td><em>Initial:</em>

     <td>none

    <tr>
     <td><em>Applies to:</em>

     <td>all elements

    <tr>
     <td><em>Inherited:</em>

     <td>no

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Media:</em>

     <td>all

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>For URI values, the absolute URI; for attr() values, the resulting
      URI or string; for other keywords, as specified.
  </table>

  <p>This property specifies the target of the bookmark link.

  <div class=example>
   <pre>
.bookmark {
   bookmark-label: attr(title, string);
   bookmark-target: attr(href, url);
}
...
&lt;a class="bookmark" title="The green pear" href="#pears"/>
</pre>
  </div>

  <div class=example> .exable { bookmark-label: url(http://www.example.com) }
   </div>

  <table class=propdef>
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=bookmark-state>bookmark-state</dfn>

    <tr>
     <td><em>Value:</em>

     <td>open | closed

    <tr>
     <td><em>Initial:</em>

     <td>open

    <tr>
     <td><em>Applies to:</em>

     <td>block-level elements

    <tr>
     <td><em>Inherited:</em>

     <td>no

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Media:</em>

     <td>all

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>specified value
  </table>

  <p>This property describes the initial state of a bookmark.

  <div>
   <pre>
* { bookmark-state: closed }
#open { bookmark-state: open }
</pre>
  </div>

  <h2 id=cmyk-colors><span class=secno>15 </span>CMYK colors</h2>

  <p class=issue>PDF can hold two types of CMYK values: device-specific and
   color-profile-specific. In the latter case, we may need to point to a
   color profile.

  <p>Printers do not use RGB colors, they (often) use CMYK: cyan, magenta,
   yellow and black. A new functional value allows style sheets to express
   CMYK colors.

  <div class=example>
   <pre>
h3 { color: cmyk(0.8, 0.5, 0.0, 0.3) }
</pre>
  </div>

  <p>The values representing the colors are between &lsquo;<code
   class=css>0</code>&rsquo; and &lsquo;<code class=css>1</code>&rsquo;.
   Values outside this range are clipped.

  <p>Unless a color profile is specified, the cmyk() value refers to
   device-specific colors. A future version of this specification will
   describe how to link to color profiles.

  <p>It is not expected that screen-centric user agents support CMYK colors
   and it is therefore important that existing CSS color values can be
   combined with CMYK colors.

  <div class=example>
   <pre>
h3 {
  color: red;
  color: cmyk(0.5, 0.1, 0.0, 0.2);
}
</pre>

   <p>User Agents that do not understand the <code>cmyk()</code> value, will
    use the first color (red). User agents that understand
    <code>cmyk()</code> will use the second color (which is bluish).
  </div>

  <h2 id=creating-paged-presentations><span class=secno>16 </span>Creating
   paged presentations</h2>

  <p>Printed publications are paged, while screen-based presentations of web
   pages are most often presented in a continuous manner with a scrollbar on
   the side. There are reasons to believe that screen-based presentations
   also could benefit from using paged presentations. There is nothing in web
   specifications that prevent browsers from adding a page-based mode today.
   However, most web content is authored and styled with a continuous
   presentation in mind. This could change if it becomes possible to describe
   paged presentations in style sheets.

  <p>The simplest way to signal that a paged presentation is preferable is to
   add a value to the &lsquo;<code class=property>overflow</code>&rsquo;
   property. For example:

  <div class=example>
   <pre>
body { overflow: paged }
</pre>
  </div>

  <p>One challenge when introducing paged presentations on screens is that
   the user will need navigational tools to reach the next and previous
   pages. For scrolled presentations, the user agent automatically provides
   scrollbars. This solution could also work for paged presentations.
   However, it must be expected that authors want to design their own
   navigational tools. For example, authors may want to make their own
   buttons from images. In order to separate the style and the presentation,
   these navigational tools should not be part of the document.

  <h2 id=styling-blank-pages><span class=secno>17 </span>Styling blank pages</h2>

  <p>Blank pages that appear as a result of forced page breaks can be styled
   with the <code>:blank</code> pseudo-class.

  <div class=example>
   <p>In this example, forced page break may occur before <code>h1</code>
    elements.

   <pre>
h1 { page-break-before: left }

@page :blank {
  @top-center { content: "This page is intentionally left blank" }
}
</pre>
  </div>

  <p>The <code>:blank</code> pseudo-class has the same specificity as the
   <code>:first</code> pseudo-class. A page matched by <code>:blank</code>
   will still be matched by other page selectors.

  <div class=example>
   <p>If headers have been specified on all right pages, a blank right page
    will be matched by both <code>:blank</code> and <code>:right</code>.
    Therefore, margin boxes set on right pages will have to be removed unless
    they are wanted on blank pages. Here is an example where the top center
    header is removed from blank pages, while the page number remains:

   <pre>
h1 { page-break-before: left }

@page :blank {
  @top-center { content: none }
}

@page :right {
  @top-center { content: "Preliminary edition" }
  @bottom-center { content: counter(page) }
}
</pre>

   <p>Due to the higher specificity of <code>:blank</code> over
    <code>:right</code>, the top center header is removed even if
    <code>content: none</code> comes before <code>content: "Preliminary
    edition"</code>.
  </div>

  <h2 id=page-floats><span class=secno>18 </span>Page floats</h2>

  <p>Images and figures are sometimes displayed at the top or bottom of
   pages. Also, an element may be moved to the next page or not displayed at
   all if there is not enough room on its native page. These types of floats
   are called "page floats" in this specification.

  <p>To support page floats, the <span class=property>&lsquo;<code
   class=property>float</code>&rsquo;</span> property is extended with
   several new values. In this list, the new values are listed and
   categorized (along with the existing &lsquo;<code
   class=property>left</code>&rsquo;, &lsquo;<code
   class=property>right</code>&rsquo; and &lsquo;<code
   class=property>none</code>&rsquo; keywords, and the &lsquo;<code
   class=property>footnote</code>&rsquo; and &lsquo;<code
   class=css>to()</code>&rsquo; as described above):

  <ul>
   <li>horizontal keywords: left right inside outside

   <li>vertical keywords: top bottom

   <li>reference keywords: page multicol

   <li>modifier keyword: next

   <li>other keywords: none hide footnote to() page()
  </ul>

  <p>The keywords can be combined to form more complex expressions.

  <div class=example>
   <p>This code floats figures to the top of the next page:

   <pre>
.figure { 
  float: top next page;
}
</pre>
  </div>

  <p>Further, the &lsquo;<code class=property>float</code>&rsquo; property is
   extended to accept a comma-separated list of sets of keywords. If the
   first set of keywords cannot be honored with the element remaining on the
   current page, the second set of keywords will determine how the element is
   floated.

  <div class=example>
   <p>In this example, the element will be floated to the top of the next
    page unless it fits on the current page.

   <pre>
.figure { 
  float: none, top next page;
}
</pre>
  </div>

  <p>The new values have the following meaning:

  <dl>
   <dt>inside

   <dd>On a right page, this value is synonymous with &lsquo;<code
    class=property>left</code>&rsquo;. On a left page, this value is
    synonymous with &lsquo;<code class=property>right</code>&rsquo;.

   <dt>outside

   <dd>On a left page, this value is synonymous with &lsquo;<code
    class=property>left</code>&rsquo;, On a right page, this value is
    synonymous with &lsquo;<code class=property>right</code>&rsquo;.

   <dt>page

   <dd>Indicates that the page area is the containing block for the element.

   <dt>multicol

   <dd>Indicates that the multicol element is the containing block for the
    element.

   <dt>top

   <dd>This keyword indicates that the element is floated to the top of the
    flow root.

   <dt>bottom

   <dd>This keyword indicates that the element is floated to the bottom of
    the flow root.

   <dt>next

   <dd>The float is placed on top of the next page from its source location.
    If combined with &lsquo;<code class=property>bottom</code>&rsquo;, the
    float is placed on the bottom of the next page.

   <dt>page()

   <dd>The element is floated to a named page. The named page is created for
    the element, unless a suitable named page already has been created by
    another &lsquo;<code class=css><a href="#page">page()</a></code>&rsquo;
    value. The name page should appear as early as possible, but any
    &lsquo;<code class=property>next</code>&rsquo; keywords should be
    honored.

   <dd>The element is floated to one or more named pages of the type
    specified. These named pages are created for the purpose of showing the
    element, and they are presented as early as possible after the page from
    which they are displaced. If the element is not the first page float to
    be displaced from this page area to this named page name, its contents
    should continue on the last of the previously established named pages
    (unless precluded, for example by page-breaking properties).

   <dt>hide

   <dd>As if &lsquo;<code class=css>display: none</code>&rsquo; is set.
  </dl>

  <p>The keywords can be combined into sets this way:

  <ul>
   <li>only one horizontal keyword can appear in a set

   <li>only one vertical keyword can appear in a set

   <li>at least one horizontal or vertical keyword must appear, except that
    &lsquo;<code class=property>none</code>&rsquo;, &lsquo;<code
    class=property>hide</code>&rsquo;, and &lsquo;<code
    class=property>footnote</code>&rsquo; must appear alone

   <li>&lsquo;<code class=property>next</code>&rsquo; may appear once along
    with &lsquo;<code class=property><a href="#page">page</a></code>&rsquo;

   <li>keywords can appear in any order
  </ul>

  <div class=example>
   <p>Float element to the top of the page:

   <pre>
.figure { 
  float: top page;
  width: 1gr;
}
</pre>
  </div>

  <div class=example>
   <p>Float element to the top of the next page:

   <pre>
.figure { 
  float: top next page;
  width: 1gr;
}
</pre>
  </div>

  <div class=example>
   <p>Float figure to the top right of the multi-column element:

   <pre>
.figure { 
  float: top right multicol;
  width: 1gr;
}
</pre>
  </div>

  <div class=example>
   <p>Place footnotes at the bottom of the inside columns:

   <pre>
@footnote { 
  float: bottom inside multicol; 
  width: 1gr;
}
</pre>
  </div>

  <div class=example>
   <p>Place figure on top of current column:

   <pre>
.figure { 
  float: top;
}
</pre>
  </div>

  <div class=example>
   <p>If there is room on the current page, show the element in place. If
    there isn't room on the current page, hide the element.

   <pre>
.figure { 
  float: none, hide;
}
</pre>
  </div>

  <div class=example>
   <p>In this example, wide tables are floated to landscape pages:

   <pre>
table.wide { 
  float: page(landscape);
}
</pre>
   In the above code, the element is take out of the flow, which is allowed
   to continue on the same page. If the flow should be broken, this code can
   be used:
   <pre>
table.wide { 
  page: landscape;
}
</pre>
  </div>

  <div class=example>
   <p>Consider this code:

   <pre>
table { 
  float: page(landscape);
}
</pre>

   <p>If two tables appear consecutively, they will both, space permitting,
    be placed on the same named page. To ensure that each table appears on
    its own page, this code can be used:

   <pre>
table { 
  float: page(landscape);
  page-break-before: always;
}
</pre>
  </div>

  <p>For non-replaced elements in horizontal text, values on &lsquo;<code
   class=property>float</code>&rsquo; that have a horizontal component
   (&lsquo;<code class=property>right</code>&rsquo;, &lsquo;<code
   class=property>left</code>&rsquo;, &lsquo;<code
   class=property>outside</code>&rsquo;, &lsquo;<code
   class=property>inside</code>&rsquo;) will result in shrink-wrap width
   calculations as per CSS 2.1 section 10.3.5. Values that only have a
   vertical component (&lsquo;<code class=property>top</code>&rsquo;,
   &lsquo;<code class=property>bottom</code>&rsquo;, &lsquo;<code
   class=property>next</code>&rsquo;, not in combination with other values)
   will result in width calculations as per CSS 2.1 section 10.3.3. In
   vertical text, width calculations are vice versa.

  <h2 id=advanced-multi-column-layout><span class=secno>19 </span>Advanced
   multi-column layout</h2>

  <p>In paged media, it is common for figures, captions, images, and quotes
   to be laid out in certain positions for typographical reasons, rather than
   for structural (as in content order) reasons. For example, an image that
   illustrates a news story is often placed in the upper right corner of the
   article, irrespective of its order in the content. A poignant quote from
   the article may be shown in large type in the column gap, pushing aside
   text in both columns, to get the attention of the reader.

  <p>Basic multi-column layouts is described in a separated CSS3 module <a
   href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>. This
   section extends multi-column functionality so that more advanced, but
   commonly used, layouts can be achieved.

  <p>The proposed functionality relies on three new components:

  <ul>
   <li>one new value on float: &lsquo;<code class=css>multicol</code>&rsquo;:
    

   <li>one new property: &lsquo;<code class=property><a
    href="#float-offset">float-offset</a></code>&rsquo;

   <li>one new unit: &lsquo;<code class=css>gr</code>&rsquo;
  </ul>

  <p>The strategy for achieving advanced multi-column layout is similar to
   page floats; elements escape their normal flow root by setting a value on
   &lsquo;<code class=property>float</code>&rsquo;. In the case of
   multi-column layout, the keyword is &lsquo;<code
   class=css>multicol</code>&rsquo; (instead of &lsquo;<code class=css><a
   href="#page">page</a></code>&rsquo;) and it indicates that the element
   should floated wrt. the multi-column element instead of the column where
   it naturally occurs.

  <p>To further enhance positioning, the &lsquo;<code class=property><a
   href="#float-offset">float-offset</a></code>&rsquo; property is
   introduced. It pushes elements in the opposite direction of the positional
   keywords, both horizontally and vertically.

  <p>The &lsquo;<code class=css>gr</code>&rsquo; unit is introduced to allow
   the grid lines of columns (and, potentially, tables) to be used in the
   positioning ans sizing of elements. Each column has one grid line on each
   side corresponding to the content edge of the content box.

  <p>The &lsquo;<code class=property>gr</code>&rsquo; unit has two purposes.
   When used on the &lsquo;<code class=property><a
   href="#float-offset">float-offset</a></code>&rsquo; property it identifies
   a position by counting columns and gaps from the position established by
   the &lsquo;<code class=property>float</code>&rsquo; property. Fractions on
   the &lsquo;<code class=property>gr</code>&rsquo; unit refer to fractions
   of the last counted gap or column.

  <p>When used on the &lsquo;<code class=property>width</code>&rsquo;
   property, the &lsquo;<code class=property>gr</code>&rsquo; unit identifies
   a length by counting gaps and columns, starting at the point where the
   element naturally finds itself and continuing in the direction of box
   expansion. Fractions on the &lsquo;<code class=property>gr</code>&rsquo;
   unit refer to the last gap or column counted.

  <h3 id=the-float-offset-property><span class=secno>19.1 </span>The
   &lsquo;<code class=property><a
   href="#float-offset">float-offset</a></code>&rsquo; property</h3>

  <table class=propdef>
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=float-offset>float-offset</dfn>

    <tr>
     <td><em>Value:</em>

     <td>&lt;length> &lt;length> ?

    <tr>
     <td><em>Initial:</em>

     <td>0 0

    <tr>
     <td><em>Applies to:</em>

     <td>floated elements

    <tr>
     <td><em>Inherited:</em>

     <td>no

    <tr>
     <td><em>Percentages:</em>

     <td>refer to width and height of containing block

    <tr>
     <td><em>Media:</em>

     <td>visual, paged

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>one or two absolute lengths
  </table>

  <p>This property pushes floated elements in the opposite direction of the
   where they have been floated with &lsquo;<code
   class=property>float</code>&rsquo;. If one value is specified, it is the
   horizontal offset. If two values are specified, the first is the
   horizontal and the second is the vertical offset. If an element has only
   been floated horizontally (e.g., by setting &lsquo;<code class=css>float:
   right</code>&rsquo;), this property will only offset the float
   horizontally, even if a vertical value also has been specified. Likewise,
   if an element has only been floated vertically, this property will only
   offset the float vertically. If an element has been floated both
   horizontally and vertically, this property will offset both horizontally
   and vertically. If no vertical value has been specified, the vertical
   offset is set to zero.

  <p>If the &lsquo;<code class=property>gr</code>&rsquo; unit or percentage
   unit is used, it means that the middle of the float should be aligned with
   the specified grid line (or portion thereof).

  <p>If another unit is used, it means that the float is pushed a distance
   equal to the specified length.

  <p class=issue>&lsquo;<code class=property><a
   href="#float-offset">float-offset</a></code>&rsquo; is a good concept for
   moving a float into the right position. For completeness it should apply
   to absolute positioning as well. We should reuse existing naming
   conventions already in place for abspos elements (e.g., 'offset-left,
   &lsquo;<code class=property>right</code>&rsquo;, or call it &lsquo;<code
   class=css>shift left, </code>&rsquo;shift right' etc.).

  <div class=example>
   <p>This code serves as the base document for the examples of this section:
    

   <pre>
&lt;html>
&lt;style>
div {
  column-width: 15em;
  column-gap: 2em;               /* shown in red below */
  column-rule: thin solid black; /* shown in black below */
  padding: 1em;                  /* shown in blue below */
}
img {
  display: block;                /* shown in dark gray below */
}
&lt;/style>
&lt;body>
&lt;div>
Lorem ipsum dolor sit amet. Nam at jus.
&lt;img src="foo"/>
Sed imp er di et ris. Cur abi tur et sapen.
...
&lt;/div>
&lt;/body>
&lt;/html>
</pre>

   <p>This code can be rendered as:

   <div class=cols>
    <p>Lorem ipsum dolor<br>
     sit amet. Nam at jus. <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     Sed imp er di et ris.<br>
     Cur abi tur et sapen.

    <div style="position: absolute; left: 175px; top: 0; z-index: 6;">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.<br>
      Sed imp er di et ris.<br>
      Cur abi tur et sapen.<br>
      Vivamus a metus.<br>
      Aenean at risus<br>
      pharetra ante luctu<br>
      feugiat quis enim.<br>
      Cum sociis natoque<br>
      penatibus et magni.
    </div>

    <div style="position: absolute; left: 350px; top: 0; z-index: 6;">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.<br>
      Sed imp er di et ris.<br>
      Cur abi tur et sapen.<br>
      Vivamus a metus.<br>
      Aenean at risus<br>
      pharetra ante luctu<br>
      feugiat quis enim.<br>
      Cum sociis natoque<br>
      penatibus et magni.
    </div>

    <div class=rep></div>

    <div class=gap style="left: 150px"></div>

    <div class=gap style="left: 325px"></div>
   </div>
  </div>

  <div class=example>
   <p>If this code is added to the base document:

   <pre>
img { float: right }
</pre>

   <p>it may be rendered as:

   <div class=cols>
    <p>Lorem ipsum dolor<br>
     sit amet. Nam at jus. <br>
     Sed<br>
     imp<br>
     er di<br>
     et ris.<br>
     Cur<br>
     abi<br>
     tur et sapen. Fusce<br>
     sed ligula a turpis.

    <div style="position: absolute; left: 175px; top: 0; z-index: 6;">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.<br>
      Sed imp er di et ris.<br>
      Cur abi tur et sapen.<br>
      Vivamus a metus.<br>
      Aenean at risus<br>
      pharetra ante luctu<br>
      feugiat quis enim.<br>
      Cum sociis natoque<br>
      penatibus et magni.
    </div>

    <div style="position: absolute; left: 350px; top: 0; z-index: 6;">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.<br>
      Sed imp er di et ris.<br>
      Cur abi tur et sapen.<br>
      Vivamus a metus.<br>
      Aenean at risus<br>
      pharetra ante luctu<br>
      feugiat quis enim.<br>
      Cum sociis natoque<br>
      penatibus et magni.
    </div>

    <div class=rep style="left: 50px"></div>

    <div class=gap style="left: 150px"></div>

    <div class=gap style="left: 325px"></div>
   </div>
  </div>

  <div class=example>
   <p>This code floats images to the bottom of their containing block and
    sets the width to be that of the column:

   <pre>
img { 
  float: bottom;
  width: 1gr;
}
</pre>

   <p>The column box is the containing block for floats, so if an image
    naturally appears in the first column it will float to its bottom:

   <div class=cols>
    <p>Lorem ipsum dolor<br>
     sit amet. Nam at jus.<br>
     Sed imp er di et ris.<br>
     Cur abi tur et sapen.

    <div style="position: absolute; left: 175px; top: 0; z-index: 6;">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.<br>
      Sed imp er di et ris.<br>
      Cur abi tur et sapen.<br>
      Vivamus a metus.<br>
      Aenean at risus<br>
      pharetra ante luctu<br>
      feugiat quis enim.<br>
      Cum sociis natoque<br>
      penatibus et magni.
    </div>

    <div style="position: absolute; left: 350px; top: 0; z-index: 6;">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.<br>
      Sed imp er di et ris.<br>
      Cur abi tur et sapen.<br>
      Vivamus a metus.<br>
      Aenean at risus<br>
      pharetra ante luctu<br>
      feugiat quis enim.<br>
      Cum sociis natoque<br>
      penatibus et magni.
    </div>

    <div class=rep style="width: 150px; top: 90px"></div>

    <div class=gap style="left: 150px"></div>

    <div class=gap style="left: 325px"></div>
   </div>
  </div>

  <div class=example>
   <p>This code floats figures to the top of the multi-column element.

   <pre>
div.figure { 
  float: top right multicol; 
  width: 1gr }
</pre>

   <p>The &lsquo;<code class=css>1gr</code>&rsquo; value on &lsquo;<code
    class=property>width</code>&rsquo; is equal to the width of the
    containing block. Here is a possible rendering:

   <div class=cols>
    <p>Lorem ipsum dolor<br>
     sit amet. Nam at jus.<br>
     Sed imp er di et ris.<br>
     Cur abi tur et sapen.<br>
     Vivamus a metus.<br>
     Aenean at risus<br>
     pharetra ante luctu<br>
     feugiat quis enim.<br>
     Cum sociis natoque<br>
     penatibus et magni.

    <div style="position: absolute; left: 175px; top: 0px; z-index: 6">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.<br>
      Sed imp er di et ris.<br>
      Cur abi tur et sapen.<br>
      Vivamus a metus.<br>
      Aenean at risus<br>
      pharetra ante luctu<br>
      feugiat quis enim.<br>
      Cum sociis natoque<br>
      penatibus et magni.
    </div>

    <div style="position: absolute; left: 350px; top: 115px; z-index: 6">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.<br>
      Sed imp er di et ris.<br>
      Cur abi tur et sapen.
    </div>

    <div class=rep style="top: 0; left: 350px; width: 150px"></div>

    <div class=gap style="left: 150px"></div>

    <div class=gap style="left: 325px"></div>
   </div>
  </div>

  <div class=example>
   <p>In this code, the &lsquo;<code class=property>float</code>&rsquo;
    property floats the element to the top left of the multi-column element,
    while the &lsquo;<code class=property><a
    href="#float-offset">float-offset</a></code>&rsquo; property pushes it to
    the right so that it ends up in the column next to it:

   <pre>
div.quote { 
  float: top left multicol; 
  float-offset: 2.5gr; 
  width: 1gr }
</pre>

   <div class=cols>
    <p>Lorem ipsum dolor<br>
     sit amet. Nam at jus.<br>
     Sed imp er di et ris.<br>
     Cur abi tur et sapen.<br>
     Vivamus a metus.<br>
     Aenean at risus<br>
     pharetra ante luctu<br>
     feugiat quis enim.<br>
     Cum sociis natoque<br>
     penatibus et magni.

    <div style="position: absolute; left: 175px; top: 115px; z-index: 6">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.<br>
      Sed imp er di et ris.<br>
      Cur abi tur et sapen.
    </div>

    <div style="position: absolute; left: 350px; top: 0px; z-index: 6">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.<br>
      Sed imp er di et ris.<br>
      Cur abi tur et sapen.<br>
      Vivamus a metus.<br>
      Aenean at risus<br>
      pharetra ante luctu<br>
      feugiat quis enim.<br>
      Cum sociis natoque<br>
      penatibus et magni.
    </div>

    <div class=rep style="top: 0; left: 175px; width: 150px"></div>

    <div class=gap style="left: 150px"></div>

    <div class=gap style="left: 325px"></div>
   </div>

   <p>Assuming a three-column layout, the same rendering can be achieved by
    floating the element to the right instead:

   <pre>
div.quote { 
  float: top right multicol; 
  float-offset: 2gr; 
  width: 1gr }
</pre>
  </div>

  <p>The floated element will never be pushed outside the content edges of
   the multicol element due to &lsquo;<code class=property><a
   href="#float-offset">float-offset</a></code>&rsquo;.

  <div class=example>
   <pre>
img {
  float: top right multicol;
  width: 3gr;
}
</pre>

   <p>The code above floats the element to the top right of the multi-column
    element. Further, it sets the width of images to the width of two columns
    plus the gap between them. Here is a possible rendering.

   <div class=cols>
    <p>Lorem ipsum dolor<br>
     sit amet. Nam at jus.<br>
     Sed imp er di et ris.<br>
     Cur abi tur et sapen.<br>
     Vivamus a metus.<br>
     Aenean at risus<br>
     pharetra ante luctu<br>
     feugiat quis enim.<br>
     Cum sociis natoque<br>
     penatibus et magni.

    <div style="position: absolute; left: 175px; top: 115px; z-index: 6">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.<br>
      Sed imp er di et ris.<br>
      Cur abi tur et sapen.
    </div>

    <div style="position: absolute; left: 350px; top: 115px; z-index: 6">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.<br>
      Sed imp er di et ris.<br>
      Cur abi tur et sapen.
    </div>

    <div class=rep style="top: 0; left: 175px; width: 325px"></div>

    <div class=gap style="left: 150px"></div>

    <div class=gap style="left: 325px"></div>
   </div>
  </div>

  <div class=example>
   <pre>
img {
  float: top right multicol;
  width: 2gr;
}
</pre>

   <p>The code above floats the element to the top right of the multi-column
    element. Further, it sets the width of the image to the width of one
    column plus one column gap. Here is a possible rendering.

   <div class=cols>
    <p>Lorem ipsum dolor<br>
     sit amet. Nam at jus.<br>
     Sed imp er di et ris.<br>
     Cur abi tur et sapen.<br>
     Vivamus a metus.<br>
     Aenean at risus<br>
     pharetra ante luctu<br>
     feugiat quis enim.<br>
     Cum sociis natoque<br>
     penatibus et magni.

    <div style="position: absolute; left: 175px; top: 0px; z-index: 6">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.<br>
      Sed imp er di et ris.<br>
      Cur abi tur et sapen.<br>
      Vivamus a metus.<br>
      Aenean at risus<br>
      pharetra ante luctu<br>
      feugiat quis enim.<br>
      Cum sociis natoque<br>
      penatibus et magni.
    </div>

    <div style="position: absolute; left: 350px; top: 115px; z-index: 6">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.<br>
      Sed imp er di et ris.<br>
      Cur abi tur et sapen.
    </div>

    <div class=rep style="top: 0; left: 325px; width: 175px"></div>

    <div class=gap style="left: 150px"></div>

    <div class=gap style="left: 325px"></div>
   </div>
  </div>

  <div class=example>
   <pre>
img {
  float: top right multicol;
  width: 1.5gr;
}
</pre>

   <p>The code above floats the element to the top right of the multi-column
    element. Further, it sets the width of the image to the width of one
    column plus half the column gap.

   <div class=cols>
    <p>Lorem ipsum dolor<br>
     sit amet. Nam at jus.<br>
     Sed imp er di et ris.<br>
     Cur abi tur et sapen.<br>
     Vivamus a metus.<br>
     Aenean at risus<br>
     pharetra ante luctu<br>
     feugiat quis enim.<br>
     Cum sociis natoque<br>
     penatibus et magni.

    <div style="position: absolute; left: 175px; top: 0px; z-index: 6">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.<br>
      Sed imp er di et ris.<br>
      Cur abi tur et sapen.<br>
      Vivamus a metus.<br>
      Aenean at risus<br>
      pharetra ante luctu<br>
      feugiat quis enim.<br>
      Cum sociis natoque<br>
      penatibus et magni.
    </div>

    <div style="position: absolute; left: 350px; top: 115px; z-index: 6">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.<br>
      Sed imp er di et ris.<br>
      Cur abi tur et sapen.
    </div>

    <div class=rep style="top: 0; left: 337.5px; width: 163px"></div>

    <div class=gap style="left: 150px"></div>

    <div class=gap style="left: 325px"></div>
   </div>
  </div>

  <div class=example>
   <pre>
img { 
  float: top left multicol;
  float-offset: 1.5gr 50%;
  width: 8em;
}
</pre>

   <p>The first rule in the code above floats images to the top left of the
    multi-column element. The second rule pushes the float in the opposite
    directions: to the right and downwards. The horizontal component
    (&lsquo;<code class=css>1.5gr</code>&rsquo;) means that the horizontal
    middle of the element should be in the middle of the gap between the
    left-most column and the one next to it. Vertically, element should be in
    the middle of the column. Here is a possible rendering:

   <div class=cols>
    <p>Lorem ipsum dolor<br>
     sit amet. Nam at jus. <br>
     Sed<br>
     imp<br>
     er di<br>
     et ris.<br>
     Cur<br>
     abi<br>
     tur et sapen. Fusce<br>
     sed ligula a turpis.

    <div style="position: absolute; left: 175px; top: 0; z-index: 6;">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.

     <div style="margin-left: 100px"> Sed<br>
      imp<br>
      er di<br>
      et ris.<br>
      Cur<br>
      abi</div>
     tur et sapen. Fusce <br>
     sed ligula a turpis.</div>

    <div style="position: absolute; left: 350px; top: 0; z-index: 6;">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.<br>
      Sed imp er di et ris.<br>
      Cur abi tur et sapen.<br>
      Vivamus a metus.<br>
      Aenean at risus<br>
      pharetra ante luctu<br>
      feugiat quis enim.<br>
      Cum sociis natoque<br>
      penatibus et magni.
    </div>

    <div class=rep style="left: 50px; width: 220px"></div>

    <div class=gap style="left: 150px"></div>

    <div class=gap style="left: 325px"></div>
   </div>
  </div>

  <div class=example>
   <pre>
img { 
  float: top left multicol;
  float-offset: 1.25gr 50%;
  width: 6em;
}
</pre>

   <p>The only difference between this and the previous example is the
    horizontal value on &lsquo;<code class=property><a
    href="#float-offset">float-offset</a></code>&rsquo;. The value
    &lsquo;<code class=css>1.25gr</code>&rsquo; means that a point 25% into
    the image in the inline direction will be aligned with a point 25% into
    the column gap. Here is a possible rendering:

   <div class=cols>
    <p>Lorem ipsum dolor<br>
     sit amet. Nam at jus. <br>
     Sed imper di et<br>
     ris. Cur abi tur<br>
     et sapen. Fusce<br>
     sed ligula a sic<br>
     turpis. Lorem<br>
     ipsum dolor sit<br>
     amet. Namat jus. Sed<br>
     imper di et ris curit.

    <div style="position: absolute; left: 175px; top: 0; z-index: 6;">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.

     <div style="margin-left: 100px"> Sed<br>
      imp<br>
      er di<br>
      et ris.<br>
      Cur<br>
      abi</div>
     tur et sapen. Fusce <br>
     sed ligula a turpis.</div>

    <div style="position: absolute; left: 350px; top: 0; z-index: 6;">
     <p>Lorem ipsum dolor<br>
      sit amet. Nam at jus.<br>
      Sed imp er di et ris.<br>
      Cur abi tur et sapen.<br>
      Vivamus a metus.<br>
      Aenean at risus<br>
      pharetra ante luctu<br>
      feugiat quis enim.<br>
      Cum sociis natoque<br>
      penatibus et magni.
    </div>

    <div class=rep style="left: 120px; width: 150px"></div>

    <div class=gap style="left: 150px"></div>

    <div class=gap style="left: 325px"></div>
   </div>
  </div>

  <h2 id=page-lists><span class=secno>20 </span>Page lists</h2>

  <p>In CSS 2.0, the &lsquo;<code class=property><a
   href="#page">page</a></code>&rsquo; property takes one value, and the
   value can be &lsquo;<code class=property>auto</code>&rsquo; or a named
   page.

  <p>In this specification, a space-separated list of named pages (called a
   "page list") is allowed in the &lsquo;<code class=property><a
   href="#page">page</a></code>&rsquo; property and the property is changed
   from inherited to non-inherited.

  <h3 id=the-page-property><span class=secno>20.1 </span>The &lsquo;<code
   class=property><a href="#page">page</a></code>&rsquo; property</h3>

  <table class=propdef>
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=page>page</dfn>

    <tr>
     <td><em>Value:</em>

     <td>auto | [ &lt;identifier> ]+ auto?

    <tr>
     <td><em>Initial:</em>

     <td>auto

    <tr>
     <td><em>Applies to:</em>

     <td>block-level elements

    <tr>
     <td><em>Inherited:</em>

     <td>no

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Media:</em>

     <td>all

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>specified value
  </table>

  <p>The content of the element is laid out on the list of pages specified on
   this property. The values mean:

  <dl>
   <dt>auto

   <dd>A single &lsquo;<code class=property>auto</code>&rsquo; value means
    that the element is laid out on the established page list. If no page
    list has been established, unnamed pages are created as necessary.

   <dt>one or more named pages, optionally followed by &lsquo;<code
    class=property>auto</code>&rsquo;

   <dd>The element is laid out on the named pages specified in the page list.
    A page break is generated before the element unless the first named page
    in the list is the same as the current page. If more pages are required
    than there are items in the page list, the last item is repeated so that
    the element can be displayed. If the page list ends with the &lsquo;<code
    class=property>auto</code>&rsquo; keyword, the page list continues after
    the end of the element, otherwise the page list reverts back to that of
    the parent element.
  </dl>

  <div class=example>
   <pre>
  &lt;div class="chapter">
    &lt;h1>The beginning&lt;/h1>
    ....
  &lt;/div>

  &lt;div class="chapter">
    &lt;h1>The end&lt;/h1>
    ....
  &lt;/div>
</pre>

   <p>Given the above markup, this style sheet will put the content on pages
    that have chapter titles at the top &mdash; except the first page of each
    chapter.

   <pre>
  @page chapter { 
    @top-center { content: string(title) }
  }
  @page chapter-start { 
    @top-center { content: none }
  }

  div.chapter { page: chapter-start chapter }
  h1 { string-set: title content() }
</pre>

   <p>This code will do the same using the :first pseudo-class:

   <pre>
  @page chapter { 
    @top-center { content: string(title) }
  }
  @page chapter:first { 
    @top-center { content: none }
  }

  div.chapter { page: chapter; page-break-before: always; }
  h1 { string-set: title content() }
</pre>

   <p>Note that <code>chapter:first</code> only applies if the is a forced
    page break before the first <code>chapter</code> page. <!--
http://lists.w3.org/Archives/Public/www-style/2008Sep/0162.html
-->
    
  </div>

  <div class=example>
   <pre>
  &lt;h1>The beginning&lt;/h1>
    ....
  &lt;h1>The end&lt;/h1>
    ....
</pre>

   <p>Given the above markup, this style sheet will put the content on pages
    that have chapter titles at the top &mdash; except the first page of each
    chapter.

   <pre>
  @page chapter { 
    @top-center { content: string(title) }
  }
  @page chapter-start { 
    @top-center { content: none }
  }
  h1 { page: chapter-start chapter auto;
       string-set: title content() }
</pre>

   <p>Elements following h1 elements will continue on page sequence specified
    on the h1 elements due to the &lsquo;<code
    class=property>auto</code>&rsquo; value at the end of the page list.
  </div>

  <div class=example>
   <pre>
  &lt;table>...&lt;/table>
</pre>

   <p>Given the above markup, this style sheet will put all tables on
    "rotated" pages, with a page break before and after each table:

   <pre>
  @page rotated { size: landscape }
  table { page: rotated }
</pre>
  </div>

  <div class=example>
   <pre>
  &lt;div>
    &lt;table>...&lt;/table>
    &lt;table>...&lt;/table>
    &lt;p>This text is rendered on a 'narrow' page&lt;/p>
  &lt;/div>
</pre>

   <p>Given the above markup, this style sheet will put the two tables on
    "rotated" pages. The tables will be placed on the same pages if there is
    room. The paragraph following the tables will be placed on the "narrow"
    page.

   <pre>
  @page narrow { size: 9cm 18cm }
  @page rotated { size: landscape }
  div { page: narrow }
  table { page: rotated }
</pre>
  </div>

  <div class=out>
   <h2 id=continuation-markers><span class=secno>21 </span>Continuation
    markers</h2>

   <p>Continuation markers are used to indicate that an element continues
    from one page to the next. The ::before-page-break pseudo-element is
    shown after the last line before the page break. The ::after-page-break
    pseudo-element is shown before the first line after the page break.
    Continuation markers otherwise act as ::marker pseudo-elements <a
    href="#CSS3LIST" rel=biblioentry>[CSS3LIST]<!--{{!CSS3LIST}}--></a>,
    except that the value of &lsquo;<code
    class=property>list-style-position</code>&rsquo; is honored on the
    pseudo-elements rather than the host element.

   <div class=example>
    <pre>
p::before-page-break { 
   list-style-position: outside;
   content: url(to-arrow.png);
}
p::after-page-break { 
   list-style-position: outside;
   content: url(from-arrow.png);
}
</pre>
   </div>

   <h2 id=change-bars><span class=secno>22 </span>Change bars</h2>

   <p>Change bars are used to indicate that a change has occurred in a
    section of a document. The changed section does not necessarily
    correspond to an element and (given the tree structure of common markup
    languages) it is not always possible to create any such element.

   <p>To avoid these limitations, the beginning of a change mark is
    associated with one element and the end of a change mark is associated
    with another element.

   <p>Change bars do not take up space in the layout.

   <div class=example>
    <pre>
p.change-start { 
  change-bar: thin solid red;
  change-bar-class: change1;
  change-bar-offset: 0.3em;
  change-bar-side: left; /* or right, inside, outside */
}

p.change-end { 
  change-bar-class: change1;
}
</pre>
   </div>

   <p class=note>This model is borrowed from <a
    href="http://www.w3.org/TR/2006/CR-xsl11-20060220/#fo_change-bar-begin">XSL-FO</a>.
    

   <h2 id=line-numbers><span class=secno>23 </span>Line numbers</h2>

   <p class=issue>This is an early sketch of what may turn into a more
    complete proposal.

   <p>Line numbers are sometimes used to reference particular lines of a
    document. Line numbers can be generated through pseudo-elements.

   <div class=example>
    <p>In this example, line numbers are shown on the left side of every
     fifth line. Also, the line number counter is reset on every page.

    <pre>
::line-number-left(5) { 
   font: 10pt serif; 
   content: counter(line);
}

@page { counter-reset: line }
</pre>
   </div>

   <p>These are the pseudo-elements that can set line numbers: &lsquo;<code
    class=property>line-number-left</code>&rsquo;, &lsquo;<code
    class=property>line-number-right</code>&rsquo;, &lsquo;<code
    class=property>line-number-inside</code>&rsquo;, &lsquo;<code
    class=property>line-number-outside</code>&rsquo;.

   <p>The &lsquo;<code class=css>line</code>&rsquo; counter is set to zero at
    the beginning of the document and incremented by one for each line box of
    elements in the normal flow, excluding tables.

   <p class=issue>The use of multiple pseudo-elements to control where the
    line counter appears seems clumsy, but there doesn't seem to be any other
    way to get that functionality without adding more properties.

   <h2 id=generated-lists><span class=secno>24 </span>Generated lists</h2>

   <p>Books typically have sections that are extracted from the main content,
    for example, a the table of contents (TOC) in the front and an index at
    the back. Also, there are glossaries and lists of figures (LOF) and lists
    of tables (LOT). These sections can all be referred to as <em>generated
    lists</em>; they are generated from the main content, and have the nature
    of lists. Some lists are sorted alphabetically (e.g., an index and a
    glossary), and others reflect the order of the content (e.g., TOCs, LOFs,
    and LOTs).

   <p>To generate lists in CSS, a <em>prototype list</em> must be
    established. Generated list items will be flowed into the prototype list,
    but it can also contain content of its own. The prototype list is
    identified with the &lsquo;<code class=property><a
    href="#prototype">prototype</a></code>&rsquo; property. To add generated
    list items to the prototype list, the &lsquo;<code class=property><a
    href="#prototype-insert">prototype-insert</a></code>&rsquo; property is
    used. The &lsquo;<code class=property><a
    href="#prototype-insert-position">prototype-insert-position</a></code>&rsquo;
    and &lsquo;<code class=property><a
    href="#prototype-insert-policy">prototype-insert-policy</a></code>&rsquo;
    properties describe where and how generated list items are inserted into
    the prototype list.

   <h3 id=the-prototype-properties><span class=secno>24.1 </span>The
    prototype properties</h3>

   <table class=propdef>
    <tbody>
     <tr>
      <td><em>Name:</em>

      <td><dfn id=prototype>prototype</dfn>

     <tr>
      <td><em>Value:</em>

      <td>list | none

     <tr>
      <td><em>Initial:</em>

      <td>none

     <tr>
      <td><em>Applies to:</em>

      <td>all elements

     <tr>
      <td><em>Inherited:</em>

      <td>no

     <tr>
      <td><em>Percentages:</em>

      <td>N/A

     <tr>
      <td><em>Media:</em>

      <td>all

     <tr>
      <td><em>Computed&nbsp;value:</em>

      <td>specified value
   </table>

   <p>This property declares that an element is a prototype list. A prototype
    list can hold generated list items inside it. Prototype lists cannot be
    nested. For each prototype list, the user agent must remember the current
    insert position.

   <p class=issue>Strictly, this property isn't necessary -- one could infer
    from &lsquo;<code class=property><a
    href="#prototype-insert-position">prototype-insert-position</a></code>&rsquo;
    or &lsquo;<code class=property><a
    href="#prototype-insert-policy">prototype-insert-policy</a></code>&rsquo;
    that something is a prototype list.

   <table class=propdef>
    <tbody>
     <tr>
      <td><em>Name:</em>

      <td><dfn id=prototype-insert>prototype-insert</dfn>

     <tr>
      <td><em>Value:</em>

      <td>&lt;identifier> [ content() || content(before) || content(after) ||
       content(first-letter) [, &lt;identifier> [ content() ||
       content(before) || content(after) || content(first-letter) ] ]* | none
       

     <tr>
      <td><em>Initial:</em>

      <td>none

     <tr>
      <td><em>Applies to:</em>

      <td>all elements

     <tr>
      <td><em>Inherited:</em>

      <td>no

     <tr>
      <td><em>Percentages:</em>

      <td>N/A

     <tr>
      <td><em>Media:</em>

      <td>all

     <tr>
      <td><em>Computed&nbsp;value:</em>

      <td>specified value
   </table>

   <p>This property specifies a comma-separated list of elements that should
    be generated in generated lists. The initial &lsquo;<code
    class=css>none</code>&rsquo; value means that no elements are generated.
    The comma-separated list consists of the name of the ID attribute of a
    prototype element with a starting &lsquo;<code class=css>#</code>&rsquo;,
    and a specification of the content which is to be generated. The content
    is one or more of these, in any order: content(), content(before),
    content(after), content(first-letter). The content is inserted into
    prototype element if it is empty, otherwise into the first empty element
    inside the prototype element.

   <table class=propdef>
    <tbody>
     <tr>
      <td><em>Name:</em>

      <td><dfn id=prototype-insert-position>prototype-insert-position</dfn>

     <tr>
      <td><em>Value:</em>

      <td>current | sorted

     <tr>
      <td><em>Initial:</em>

      <td>current

     <tr>
      <td><em>Applies to:</em>

      <td>all elements

     <tr>
      <td><em>Inherited:</em>

      <td>no

     <tr>
      <td><em>Percentages:</em>

      <td>N/A

     <tr>
      <td><em>Media:</em>

      <td>all

     <tr>
      <td><em>Computed&nbsp;value:</em>

      <td>specified value
   </table>

   <table class=propdef>
    <tbody>
     <tr>
      <td><em>Name:</em>

      <td><dfn id=prototype-insert-policy>prototype-insert-policy</dfn>

     <tr>
      <td><em>Value:</em>

      <td>normal | unique

     <tr>
      <td><em>Initial:</em>

      <td>normal

     <tr>
      <td><em>Applies to:</em>

      <td>all elements

     <tr>
      <td><em>Inherited:</em>

      <td>no

     <tr>
      <td><em>Percentages:</em>

      <td>N/A

     <tr>
      <td><em>Media:</em>

      <td>all

     <tr>
      <td><em>Computed&nbsp;value:</em>

      <td>specified value
   </table>

   <h3 id=toc><span class=secno>24.2 </span>TOC</h3>

   <div class=example>
    <p>Here is an example of how to generate a TOC with leaders and page
     numbers.

    <pre>
...
&lt;style>
  #toc { prototype: list }
  #toc-entry { 
    prototype-insert-position: current;
    font-size: 14pt }
  #toc-entry::after { content: leader('. ') source-counter(page) }
  h1.chapter { prototype-insert: #toc-entry content() }
&lt;/style>
...
&lt;div id="toc">
  &lt;h1>Table of contents&lt;/h1>
  &lt;div id="toc-entry">&lt;/div>
&lt;/div>
...
&lt;h1 class="chapter">Introduction&lt;/h1>
...
</pre>
   </div>

   <p>There are three new properties and one new value on the &lsquo;<code
    class=property>content</code>&rsquo; property in the above example. This
    rule:

   <pre>
  #toc { prototype: list }
</pre>

   <p>declares that the #toc element is a prototype list that accepts
    generated lists. This rule:

   <pre>
    prototype-insert-position: current;
</pre>

   <p>specifies that entities in the #toc are to be added at the current
    position, i.e., inside or after the previous generated list item. This
    code:

   <pre>
  #toc-entry::after { content: leader('. ') source-counter(page)} 
</pre>

   <p>has one new value (&lsquo;<code
    class=css>source-counter(page)</code>&rsquo;) which fetches the value of
    the &lsquo;<code class=css><a href="#page">page</a></code>&rsquo; counter
    from the source element, i.e., the element which has a &lsquo;<code
    class=property><a
    href="#prototype-insert">prototype-insert</a></code>&rsquo; declaration:

   <pre>
  h1.chapter { prototype-insert: toc-entry content() }
</pre>

   <p>The above rule creates one new element. The new element is isomorphic
    to the #toc-entry element and is inserted according to the &lsquo;<code
    class=property><a
    href="#prototype-insert-position">prototype-insert-position</a></code>&rsquo;
    of #toc-entry.

   <h3 id=glossary><span class=secno>24.3 </span>Glossary</h3>

   <p>Glossaries provide a new kind of challenge: entries are sorted
    alphabetically.

   <div class=example>
    <p>Here is an example of how to generate a glossary:

    <pre>
...
&lt;style>
#glossary { prototype: list }
#glossary-term { prototype-insert-position: sorted }
#glossary-definition { prototype-insert-position: current }
dfn { prototype-insert: glossary-term content(), glossary-definition attr(title) }

&lt;/style>
...
&lt;div id="glossary">
&lt;h2>Glossary of terms&lt;/h2>
&lt;dl>
  &lt;dt id="glossary-term">...&lt;/dt>
  &lt;dd id="glossary-definition">...&lt;/dd>
&lt;/dl>
&lt;/div>
...

&lt;p>The &lt;dfn title="Leading paragraph">introduction&lt;/dfn> comes first.&lt;/p>

</pre>

    <p>By inserting the term &lsquo;<code class=css>sorted</code>&rsquo; and
     the definition in the &lsquo;<code class=css>current</code>&rsquo;
     position, terms will be sorted alphabetically with their respective
     definition following.
   </div>

   <div class=example>
    <p>Tables are commonly used to display lists. For example, a list of
     terms and their definition can be presented this way:

    <table style="border: thin solid black; border-collapse: collapse">
     <tbody>
      <tr>
       <th style="border: thin solid black">Term

       <th style="border: thin solid black">Definition

      <tr>
       <td style="border: thin solid black">yes

       <td style="border: thin solid black">expresses assent or agreement

      <tr>
       <td style="border: thin solid black">no

       <td style="border: thin solid black">expresses negation, dissent,
        denial, or refusal
    </table>

    <pre>
#glossary { prototype: container }
#glossary-term { prototype-insert-position: sorted  }
#glossary-definition { prototype-insert-position: current }
dfn { prototype-insert: #glossary-term content(), #glossary-definition attr(title) }

&lt;/style>
...
&lt;table id="glossary">
	&lt;th style="border: thin solid black">Term&lt;/th>
	&lt;th style="border: thin solid black">Definition&lt;/th>
&lt;tr id="glossary-term">
	&lt;td>&lt;/td>
	&lt;td id="glossary-definition">&lt;/td>
&lt;/tr>
&lt;/table>
...
&lt;p>The &lt;dfn title="Leading paragraph">introduction&lt;/dfn> comes first.&lt;/p>
</pre>

    <p>Note that the #glossary-term element is a table row, while the element
     is inserted into a table cell. This is due to the table row being a
     non-empty element and that the first td element is the first empty
     element.
   </div>

   <h3 id=index0><span class=secno>24.4 </span>Index</h3>

   <p>An index is a generated list that is sorted alphabetically, just like
    glossaries. In addition, indexes often have single letters in large font
    sizes to help humans navigate. For example, all index entries starting
    with "s" is placed under a large capital "S". There should only be one
    large capital "S", and if there are no index entries starting with "s"
    the large "S" isn't shown.

   <p>To achieve this kind of presentation, the following strategy is
    suggested: for every index entry that is encountered, two elements are
    generated. One is the large capital letter, and the other is the index
    entry itself. To avoid having one large capital letter before each index
    entry, the &lsquo;<code class=property><a
    href="#prototype-insert-policy">prototype-insert-policy</a></code>&rsquo;
    property declares that identical generated list elements are to be
    deleted.

   <div class=example>
    <pre>
...
&lt;style>
#index {
  prototype: list }
#index-marker {
  prototype-insert-position: sorted 
  prototype-insert-policy: unique; 
  text-transform: uppercase }
#index-entry {
  prototype-insert-position: sorted }
#index-entry::after {
  content: leader(". . ") source-counter(page) }
dfn.entry { 
  prototype-insert: #index-marker content(first-letter), #index-entry content() }
&lt;/style>
...

&lt;div id="index">
&lt;h2>Index&lt;/h2>
&lt;div id="index-marker">&lt;/div>
&lt;div id="index-entry">&lt;/div>
&lt;/div>

&lt;p>An &lt;dfn class="entry">emphasized element&lt;/dfn> stands out.&lt;/p>
...
</pre>
   </div>

   <h3 id=a-more-complex-example><span class=secno>24.5 </span>A more complex
    example</h3>

   <div class=example>
    <p>Here is a more complex example with several types of generated lists.
     Note how multilevel TOCs require a prototype list without any additional
     content. Also, notice how the "acronym" element generates an entry both
     in the index and in the list of acronyms.

    <pre>
&lt;style>
#toc-list {
  prototype: list }

#toc-entry-section {
  font-size: large;
  prototype-insert-position: current }

#toc-entry-subsection {
  font-size: medium;
  prototype-insert-position: current }

#toc-entry-section::after, #toc-entry-subsection::after {
  content: leader('. ') source-counter(page) }

#acronym-list {
  prototype: list }

#acronym-term {
  prototype-insert-position: sorted }

#acronym-definition {
  prototype-insert-position: current }

#index {
  prototype: list }

#index-marker {
  prototype-insert-position: sorted 
  prototype-insert-policy: unique;
}

#index-entry {
  prototype-insert-position: sorted }

#index-entry::after {
  content: leader('. . ') source-counter(page) }

h2 {
  prototype-insert: #toc-entry content() }

h3 {
  prototype-insert: #toc-entry content() }

acronym { 
  prototype-insert:
          #index-marker content(first-letter), 
          #index-entry content(), 
          #acronym content(), 
          #acronym-definition attr(title);
}

dfn { prototype-insert: 
          #index-marker content(first-letter), 
          #index-entry content();
}
&lt;/style>

&lt;div id="toc">
&lt;h2>Table of contents&lt;/h2>
  &lt;div id="toc-list">
    &lt;div id="toc-entry-section">&lt;/div>
    &lt;div id="toc-entry-subsection">&lt;/div>
  &lt;/div>
&lt;/div>

&lt;div id="acronym-list">
&lt;h2>List of acronyms&lt;/h2>
&lt;dl>
  &lt;dt id="acronym">&lt;/dt>
  &lt;dd id="acronym-definition">&lt;/dd>
&lt;/dl>
&lt;/div>

&lt;div id="index">
&lt;h2>Index&lt;/h2>
&lt;div id="index-marker">&lt;/div>
&lt;div id="index-entry">&lt;/div>
&lt;/div>

&lt;body>

&lt;h2>Introduction&lt;/h2>

&lt;p>This part defines the a acronym: &lt;acronym title="HyperText
Markup Language">HTML&lt;/acronym>.

&lt;h3>More to learn&lt;/h3>

&lt;p>An &lt;dfn>emphasized element&lt;/dfn> element stands out.

&lt;/body>

</pre>
   </div>
  </div>

  <h2 id=conformance><span class=secno>25 </span>Conformance</h2>

  <h2 id=appendix-a-default-style-sheet><span class=secno>26 </span>Appendix
   A: Default style sheet</h2>

  <p class=issue>

  <pre>
@page {
  counter-reset: footnote;
  @footnote {
    counter-increment: footnote;
    float: page bottom;
    width: 100%;
    height: auto;
  }
}

::footnote-call {
  counter-increment: footnote;
  content: counter(footnote, super-decimal); 
}
::footnote-marker {
  content: counter(footnote, super-decimal); 
}


h1 { bookmark-level: 1 }
h2 { bookmark-level: 2 }
h3 { bookmark-level: 3 }
h4 { bookmark-level: 4 }
h5 { bookmark-level: 5 }
h6 { bookmark-level: 6 }
</pre>

  <h2 class=no-num id=acknowledgments>Acknowledgments</h2>

  <p>This document has been improved by Bert Bos, Michael Day, Melinda Grant,
   David Baron, Markus Mielke, Steve Zilles, Ian Hickson, Elika Etemad,
   Laurens Holst, Mike Bremford, Allan Sandfeld Jensen, Kelly Miller, Werner
   Donn&eacute;, Tarquin (Mark) Wilton-Jones, Michel Fortin, Christian Roth,
   Brady Duga, Del Merritt, Ladd Van Tol, Tab Atkins Jr., Jacob Grundtvig
   Refstrup, James Elmore, Ian Tindale, Murakami Shinyu, Paul E. Merrell,
   Philip Taylor.

  <h2 class=no-num id=references>References</h2>

  <h3 class=no-num id=normative-references>Normative references</h3>
  <!--begin-normative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS3LIST>[CSS3LIST]

   <dd>Ian Hickson; Tantek &#199;elik. <a
    href="http://www.w3.org/TR/2002/WD-css3-lists-20021107"><cite>CSS3
    module: Lists.</cite></a> 7 November 2002. W3C Working Draft. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2002/WD-css3-lists-20021107">http://www.w3.org/TR/2002/WD-css3-lists-20021107</a>
    </dd>
   <!---->

   <dt id=CSS3VAL>[CSS3VAL]

   <dd>Chris Lilley; H&#229;kon Wium Lie. <a
    href="http://www.w3.org/TR/2006/WD-css3-values-20060919"><cite>CSS3
    Values and Units.</cite></a> 19 September 2006. W3C Working Draft. (Work
    in progress.) URL: <a
    href="http://www.w3.org/TR/2006/WD-css3-values-20060919">http://www.w3.org/TR/2006/WD-css3-values-20060919</a>
    </dd>
   <!---->
  </dl>
  <!--end-normative-->

  <h3 class=no-num id=other-references>Other references</h3>
  <!--begin-informative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS2>[CSS2]

   <dd>Ian Jacobs; et al. <a
    href="http://www.w3.org/TR/2008/REC-CSS2-20080411"><cite>Cascading Style
    Sheets, level 2 (CSS2) Specification.</cite></a> 11 April 2008. W3C
    Recommendation. URL: <a
    href="http://www.w3.org/TR/2008/REC-CSS2-20080411">http://www.w3.org/TR/2008/REC-CSS2-20080411</a>
    </dd>
   <!---->

   <dt id=CSS3COL>[CSS3COL]

   <dd>H&#229;kon Wium Lie. <a
    href="http://www.w3.org/TR/2007/WD-css3-multicol-20070606"><cite>CSS3
    module: Multi-column layout.</cite></a> 6 June 2007. W3C Working Draft.
    (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2007/WD-css3-multicol-20070606">http://www.w3.org/TR/2007/WD-css3-multicol-20070606</a>
    </dd>
   <!---->

   <dt id=CSS3GRID>[CSS3GRID]

   <dd>Markus Mielke; Alex Mogilevsky. <a
    href="http://www.w3.org/TR/2007/WD-css3-grid-20070905"><cite>CSS Grid
    Positioning Module Level 3.</cite></a> 5 September 2007. W3C Working
    Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2007/WD-css3-grid-20070905">http://www.w3.org/TR/2007/WD-css3-grid-20070905</a>
    </dd>
   <!---->

   <dt id=CSS3PAGE>[CSS3PAGE]

   <dd>Melinda Grant; H&#229;kon Wium Lie. <a
    href="http://www.w3.org/TR/2006/WD-css3-page-20061010"><cite>CSS3 Module:
    Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a>
    </dd>
   <!---->
  </dl>
  <!--end-informative-->

  <h2 class=no-num id=index>Index</h2>
  <!--begin-index-->

  <ul class=indexlist>
   <li>bleed, <a href="#bleed" title=bleed><strong>13</strong></a>

   <li>bookmark-label, <a href="#bookmark-label"
    title=bookmark-label><strong>14</strong></a>

   <li>bookmark-level, <a href="#bookmark-level"
    title=bookmark-level><strong>14</strong></a>

   <li>bookmark-state, <a href="#bookmark-state"
    title=bookmark-state><strong>14</strong></a>

   <li>bookmark-target, <a href="#bookmark-target"
    title=bookmark-target><strong>14</strong></a>

   <li>border-parts, <a href="#border-parts0"
    title=border-parts><strong>7.1</strong></a>

   <li>border-parts-bottom, <a href="#border-parts-bottom"
    title=border-parts-bottom><strong>7.1</strong></a>

   <li>border-parts-left, <a href="#border-parts-left"
    title=border-parts-left><strong>7.1</strong></a>

   <li>border-parts-right, <a href="#border-parts-right"
    title=border-parts-right><strong>7.1</strong></a>

   <li>border-parts-top, <a href="#border-parts-top"
    title=border-parts-top><strong>7.1</strong></a>

   <li>float-offset, <a href="#float-offset"
    title=float-offset><strong>19.1</strong></a>

   <li>hyphenate-after, <a href="#hyphenate-after"
    title=hyphenate-after><strong>10.1</strong></a>

   <li>hyphenate-before, <a href="#hyphenate-before"
    title=hyphenate-before><strong>10.1</strong></a>

   <li>hyphenate-character, <a href="#hyphenate-character"
    title=hyphenate-character><strong>10.1</strong></a>

   <li>hyphenate-lines, <a href="#hyphenate-lines"
    title=hyphenate-lines><strong>10.1</strong></a>

   <li>hyphenate-resource, <a href="#hyphenate-resource"
    title=hyphenate-resource><strong>10.1</strong></a>

   <li>hyphens, <a href="#hyphens" title=hyphens><strong>10.1</strong></a>

   <li>image-resolution, <a href="#image-resolution0"
    title=image-resolution><strong>12</strong></a>

   <li>marks, <a href="#marks" title=marks><strong>13</strong></a>

   <li>named strings, <a href="#named-strings0" title="named
    strings"><strong>3</strong></a>

   <li>page, <a href="#page" title=page><strong>20.1</strong></a>

   <li>prototype, <a href="#prototype"
    title=prototype><strong>24.1</strong></a>

   <li>prototype-insert, <a href="#prototype-insert"
    title=prototype-insert><strong>24.1</strong></a>

   <li>prototype-insert-policy, <a href="#prototype-insert-policy"
    title=prototype-insert-policy><strong>24.1</strong></a>

   <li>prototype-insert-position, <a href="#prototype-insert-position"
    title=prototype-insert-position><strong>24.1</strong></a>

   <li>running elements, <a href="#running-elements0" title="running
    elements"><strong>3</strong></a>

   <li>string-set, <a href="#string-set"
    title=string-set><strong>3.1.1</strong></a>

   <li>text-replace, <a href="#text-replace"
    title=text-replace><strong>11.1</strong></a>
  </ul>
  <!--end-index-->

  <h2 class=no-num id=property-index>Property index</h2>
  <!--begin-properties-->

  <table class=proptable>
   <thead>
    <tr>
     <th>Property

     <th>Values

     <th>Initial

     <th>Applies&nbsp;to

     <th>Inh.

     <th>Percentages

     <th>Media

   <tbody>
    <tr valign=baseline>
     <td><a class=property href="#bleed">bleed</a>

     <td>&lt;length&gt;

     <td>6pt

     <td>page context

     <td>no

     <td>refer to width of page box

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#bookmark-label">bookmark-label</a>

     <td>content() | attr() | &lt;string>

     <td>content()

     <td>all elements

     <td>no

     <td>N/A

     <td>all

    <tr valign=baseline>
     <td><a class=property href="#bookmark-level">bookmark-level</a>

     <td>none | &lt;integer>

     <td>none

     <td>all elements

     <td>no

     <td>N/A

     <td>all

    <tr valign=baseline>
     <td><a class=property href="#bookmark-state">bookmark-state</a>

     <td>open | closed

     <td>open

     <td>block-level elements

     <td>no

     <td>N/A

     <td>all

    <tr valign=baseline>
     <td><a class=property href="#bookmark-target">bookmark-target</a>

     <td>none | &lt;uri> | &lt;attr>

     <td>none

     <td>all elements

     <td>no

     <td>N/A

     <td>all

    <tr valign=baseline>
     <td><a class=property href="#border-parts0">border-parts</a>, <a
      class=property href="#border-parts-top">border-parts-top</a>, <a
      class=property href="#border-parts-right">border-parts-right</a>, <a
      class=property href="#border-parts-bottom">border-parts-bottom</a>, <a
      class=property href="#border-parts-left">border-parts-left</a>

     <td>normal | [ &lt;length&gt; | &lt;percentage&gt; | &lt;fraction&gt; |
      repeat() ]+

     <td>normal

     <td>all elements

     <td>no

     <td>refer to width of element height for vertical borders?

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#float-offset">float-offset</a>

     <td>&lt;length> &lt;length> ?

     <td>0 0

     <td>floated elements

     <td>no

     <td>refer to width and height of containing block

     <td>visual, paged

    <tr valign=baseline>
     <td><a class=property href="#hyphenate-after">hyphenate-after</a>

     <td>&lt;integer> | auto

     <td>auto

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#hyphenate-before">hyphenate-before</a>

     <td>&lt;integer> | auto

     <td>auto

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property
      href="#hyphenate-character">hyphenate-character</a>

     <td>auto | &lt;string>

     <td>auto

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#hyphenate-lines">hyphenate-lines</a>

     <td>no-limit | &lt;integer>

     <td>no-limit

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#hyphenate-resource">hyphenate-resource</a>

     <td>none | &lt;uri&gt; [, &lt;uri&gt; ]*

     <td>none

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#hyphens">hyphens</a>

     <td>none | manual | auto

     <td>manual

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#image-resolution0">image-resolution</a>

     <td>normal | [ from-image || &lt;dpi> ]

     <td>normal

     <td>replaced elements and background images

     <td>yes

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#marks">marks</a>

     <td>[ crop || cross ] | none

     <td>none

     <td>page context

     <td>no

     <td>N/A

     <td>visual, paged

    <tr valign=baseline>
     <td><a class=property href="#page">page</a>

     <td>auto | [ &lt;identifier> ]+ auto?

     <td>auto

     <td>block-level elements

     <td>no

     <td>N/A

     <td>all

    <tr valign=baseline>
     <td><a class=property href="#prototype">prototype</a>

     <td>list | none

     <td>none

     <td>all elements

     <td>no

     <td>N/A

     <td>all

    <tr valign=baseline>
     <td><a class=property href="#prototype-insert">prototype-insert</a>

     <td>&lt;identifier> [ content() || content(before) || content(after) ||
      content(first-letter) [, &lt;identifier> [ content() || content(before)
      || content(after) || content(first-letter) ] ]* | none

     <td>none

     <td>all elements

     <td>no

     <td>N/A

     <td>all

    <tr valign=baseline>
     <td><a class=property
      href="#prototype-insert-policy">prototype-insert-policy</a>

     <td>normal | unique

     <td>normal

     <td>all elements

     <td>no

     <td>N/A

     <td>all

    <tr valign=baseline>
     <td><a class=property
      href="#prototype-insert-position">prototype-insert-position</a>

     <td>current | sorted

     <td>current

     <td>all elements

     <td>no

     <td>N/A

     <td>all

    <tr valign=baseline>
     <td><a class=property href="#string-set">string-set</a>

     <td>[[ &lt;identifier> &lt;content-list>] [, &lt;identifier>
      &lt;content-list>]* ] | none

     <td>none

     <td>all elements

     <td>no

     <td>N/A

     <td>all

    <tr valign=baseline>
     <td><a class=property href="#text-replace">text-replace</a>

     <td>[&lt;string> &lt;string>]+ | none

     <td>none

     <td>all elements

     <td>yes or?

     <td>N/A

     <td>visual
  </table>
  <!--end-properties-->
